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

client/src/components/layout-form-row/layout-form-row.component.jsx

@@ -1,5 +1,6 @@
 import { Card, Col, Row } from "antd";
 import { Children, isValidElement } from "react";
+import { INLINE_FORM_ROW_WRAP_TITLE_STYLES } from "./inline-form-row-title.utils.js";
 import "./layout-form-row.styles.scss";
 
 export default function LayoutFormRow({
@@ -7,6 +8,8 @@ export default function LayoutFormRow({
   children,
   grow = false,
   noDivider = false,
+  titleOnly = false,
+  wrapTitle = false,
   gutter,
   rowProps,
 
@@ -19,10 +22,14 @@ export default function LayoutFormRow({
   ...cardProps
 }) {
   const items = Children.toArray(children).filter(Boolean);
-  if (items.length === 0) return null;
   const isCompactRow = noDivider;
 
   const title = !noDivider && header ? header : undefined;
+  const resolvedTitle = cardProps.title ?? title;
+  const isHeaderOnly = titleOnly || items.length === 0;
+  const hideBody = isHeaderOnly;
+
+  if (items.length === 0 && !resolvedTitle) return null;
   const resolvedGutter = gutter ?? [16, isCompactRow ? 8 : 16];
 
   const bg = surfaceBg ?? (surface ? "var(--imex-form-surface)" : undefined);
@@ -31,13 +38,15 @@ export default function LayoutFormRow({
 
   const mergedStyles = mergeSemanticStyles(
     {
+      ...(wrapTitle ? INLINE_FORM_ROW_WRAP_TITLE_STYLES : null),
       header: {
-        paddingInline: isCompactRow ? 12 : 16,
+        paddingInline: isHeaderOnly ? 8 : isCompactRow ? 12 : 16,
         background: headBg,
         borderBottomColor: borderColor
       },
       body: {
-        padding: isCompactRow ? 12 : 16,
+        padding: hideBody ? 0 : isCompactRow ? 12 : 16,
+        display: hideBody ? "none" : undefined,
         background: bg
       }
     },
@@ -45,31 +54,12 @@ export default function LayoutFormRow({
   );
 
   const baseCardStyle = {
-    marginBottom: isCompactRow ? "8px" : ".8rem",
+    marginBottom: isHeaderOnly ? "0" : isCompactRow ? "8px" : ".8rem",
     ...(bg ? { background: bg } : null), // ensures the “circled area” is tinted
     ...(borderColor ? { borderColor } : null),
     ...cardProps.style
   };
 
-  // single child => just render it
-  if (items.length === 1) {
-    return (
-      <Card
-        {...cardProps}
-        title={cardProps.title ?? title}
-        size={cardProps.size ?? "small"}
-        variant={cardProps.variant ?? "outlined"}
-        className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
-          .filter(Boolean)
-          .join(" ")}
-        style={baseCardStyle}
-        styles={mergedStyles}
-      >
-        {items[0]}
-      </Card>
-    );
-  }
-
   const count = items.length;
 
   // Modern responsive strategy leveraging Ant Design 6:
@@ -133,22 +123,32 @@ export default function LayoutFormRow({
   return (
     <Card
       {...cardProps}
-      title={cardProps.title ?? title}
+      title={resolvedTitle}
       size={cardProps.size ?? "small"}
       variant={cardProps.variant ?? "outlined"}
-      className={["imex-form-row", isCompactRow ? "imex-form-row--compact" : null, cardProps.className]
+      className={[
+        "imex-form-row",
+        isCompactRow ? "imex-form-row--compact" : null,
+        isHeaderOnly ? "imex-form-row--title-only" : null,
+        cardProps.className
+      ]
         .filter(Boolean)
         .join(" ")}
       style={baseCardStyle}
       styles={mergedStyles}
     >
-      <Row gutter={resolvedGutter} wrap {...rowProps}>
-        {items.map((child, idx) => (
-          <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
-            {child}
-          </Col>
+      {!isHeaderOnly &&
+        (items.length === 1 ? (
+          items[0]
+        ) : (
+          <Row gutter={resolvedGutter} wrap {...rowProps}>
+            {items.map((child, idx) => (
+              <Col key={child?.key ?? idx} {...getColPropsForChild(child)}>
+                {child}
+              </Col>
+            ))}
+          </Row>
         ))}
-      </Row>
     </Card>
   );
 }
@@ -162,6 +162,7 @@ function mergeSemanticStyles(defaults, userStyles) {
       return {
         ...defaults,
         ...computed,
+        title: { ...(defaults.title || {}), ...(computed.title || {}) },
         header: { ...defaults.header, ...(computed.header || {}) },
         body: { ...defaults.body, ...(computed.body || {}) }
       };
@@ -171,6 +172,7 @@ function mergeSemanticStyles(defaults, userStyles) {
   return {
     ...defaults,
     ...userStyles,
+    title: { ...(defaults.title || {}), ...(userStyles.title || {}) },
     header: { ...defaults.header, ...(userStyles.header || {}) },
     body: { ...defaults.body, ...(userStyles.body || {}) }
   };