Initial

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

@@ -1,20 +1,64 @@
-//Override Antd Row margin to save space on forms.
+/* layout-form-row.styles.scss */
+
+/**
+ * Surface tokens (light/dark)
+ * - --imex-form-surface: the main section background (circled area)
+ * - --imex-form-surface-head: slightly different strip for the Card header
+ * - --imex-form-surface-border: border color for the card
+ *
+ * Update the dark selector(s) to match whatever you use (body class, data-theme, etc).
+ */
+
+:root {
+  --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 */
+}
+
+/* Pick the selector that matches your app and remove the rest */
+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-row {
-  .ant-row {
-    margin-bottom: 0rem;
+  width: 100%;
+  
+  /* Match old Divider title typography */
+  .ant-card-head-title {
+    font-weight: 500;
+    font-size: var(--ant-font-size-lg);
+    line-height: 1.2; /* optional, makes it feel like a section header */
+  }
 
-    .ant-form-item-label {
-      padding: 0rem;
+  /* Make the whole section read as its own surface */
+  &.ant-card {
+    background: var(--imex-form-surface);
+    border-color: var(--imex-form-surface-border);
+  }
+
+  .ant-card-head {
+    background: var(--imex-form-surface-head);
+    border-bottom-color: var(--imex-form-surface-border);
+  }
+
+  .ant-card-body {
+    background: var(--imex-form-surface);
+  }
+
+  /* Optional: slightly tighter on phones */
+  @media (max-width: 575px) {
+    .ant-card-head {
+      padding-inline: 12px;
     }
-
-    label {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      width: 100%;
-      display: inline-block;
-      padding: 0rem;
-      margin: 0rem;
+    .ant-card-body {
+      padding: 12px;
     }
   }
+
+  /* Common form nicety */
+  .ant-col > * {
+    width: 100%;
+  }
 }