IO-3624 Extract shared title-row UI and polish config forms

client/src/components/layout-form-row/layout-form-row.styles.scss

@@ -13,6 +13,8 @@
   --imex-form-surface: #fafafa; /* subtle contrast vs white page */
   --imex-form-surface-head: #f5f5f5; /* header strip */
   --imex-form-surface-border: #d9d9d9; /* matches AntD-ish border */
+  --imex-form-title-input-bg: rgba(255, 255, 255, 0.96);
+  --imex-form-title-input-border: rgba(0, 0, 0, 0.08);
 }
 
 /* Pick the selector that matches your app and remove the rest */
@@ -20,6 +22,8 @@ html[data-theme="dark"] {
   --imex-form-surface: rgba(255, 255, 255, 0.01); /* subtle lift off page bg */
   --imex-form-surface-head: rgba(255, 255, 255, 0.06); /* slightly stronger for header strip */
   --imex-form-surface-border: rgba(5, 5, 5, 0.12);
+  --imex-form-title-input-bg: rgba(255, 255, 255, 0.12);
+  --imex-form-title-input-border: rgba(255, 255, 255, 0.2);
 }
 
 .imex-form-row {
@@ -58,6 +62,54 @@ html[data-theme="dark"] {
     }
   }
 
+  &.imex-form-row--title-only {
+    .ant-card-head {
+      min-height: auto;
+      padding-inline: 6px;
+      padding-block: 0;
+      border-radius: inherit;
+    }
+
+    .ant-card-head-wrapper {
+      gap: 2px;
+      align-items: center;
+    }
+
+    .ant-card-head-title,
+    .ant-card-extra {
+      padding-block: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .ant-card-head-title {
+      white-space: normal;
+      overflow: visible;
+      text-overflow: unset;
+      font-size: var(--ant-font-size);
+      line-height: 1.1;
+      padding-inline: 4px;
+    }
+
+    .ant-card-body {
+      display: none;
+      padding: 0;
+    }
+
+    .ant-input,
+    .ant-input-number,
+    .ant-input-affix-wrapper,
+    .ant-select-selector,
+    .ant-picker {
+      background: var(--imex-form-title-input-bg);
+      border-color: var(--imex-form-title-input-border);
+    }
+
+    .ant-input-number-input {
+      background: transparent;
+    }
+  }
+
   .ant-card-body {
     background: var(--imex-form-surface);
   }
@@ -68,7 +120,7 @@ html[data-theme="dark"] {
 
   /* Optional: tighter spacing on phones for better space usage */
   @media (max-width: 575px) {
-    .ant-card-head {
+    &:not(.imex-form-row--title-only) .ant-card-head {
       padding-inline: 12px;
       padding-block: 12px;
     }
@@ -89,10 +141,14 @@ html[data-theme="dark"] {
     width: 100%;
   }
 
-  .ant-form-item:has(> .imex-form-row--compact) {
+  .ant-form-item:has(.imex-form-row--compact) {
     margin-bottom: 8px;
   }
 
+  .ant-form-item:has(.imex-form-row--title-only) {
+    margin-bottom: 4px;
+  }
+
   /* Better form item spacing on mobile */
   @media (max-width: 575px) {
     .ant-form-item {