fix(ui): replace --base with spacer tokens in Row field CSS (#16425)

Replaces deprecated `--base` variable with proper spacer tokens in Row
field CSS.

## Changes

- Updates the **Row** field component
(`packages/ui/src/fields/Row/index.css`)
- Introduces `--row-gap` local CSS variable set to `var(--spacer-3)`
(16px)
- Replaces all `--base` calculations with the new variable
- Adds comments explaining the negative margin technique
- Improves mobile responsiveness with `flex-direction: column` instead
of `display: block`
- Also updates Point field and RenderFields spacing to use spacer tokens

## References


https://app.asana.com/1/10497086658021/project/1213409914712008/task/1214061555627426?focus=true

Author: JarrodMFlesch

packages/ui/src/fields/Point/index.css

@@ -20,7 +20,7 @@
 
     .point__wrap {
       display: flex;
-      gap: var(--spacer-2);
+      gap: var(--spacer-3);
       width: 100%;
       margin: 0;
       list-style: none;

packages/ui/src/fields/Row/index.css

@@ -1,11 +1,13 @@
 @layer payload-default {
   .field-type.row {
+    --row-gap: var(--spacer-3); /* 16px gap between row items */
+
     margin-bottom: 0;
 
     .row__fields {
       display: flex;
       flex-wrap: wrap;
-      row-gap: 1rem;
+      row-gap: var(--row-gap);
 
       > * {
         flex: 0 1 var(--field-width);
@@ -15,22 +17,24 @@
       }
 
       &:has(> *:nth-child(1)) {
-        margin-bottom: var(--base);
+        margin-bottom: var(--row-gap);
       }
 
+      /* Negative margin technique: each item gets half the gap as margin-inline,
+         container pulls back with negative margin to maintain alignment */
       &:has(> *:nth-child(2)) {
-        margin-inline: calc(var(--base) / -4);
+        margin-inline: calc(var(--row-gap) / -2);
 
         > * {
-          flex: 0 1 calc(var(--field-width) - var(--base) * 0.5);
-          margin-inline: calc(var(--base) / 4);
+          flex: 0 1 calc(var(--field-width) - var(--row-gap));
+          margin-inline: calc(var(--row-gap) / 2);
         }
       }
     }
 
     @media (max-width: 1024px) {
       .row__fields {
-        display: block;
+        flex-direction: column;
         margin-left: 0;
         margin-right: 0;
         width: 100%;

packages/ui/src/forms/RenderFields/index.scss

@@ -15,10 +15,10 @@
   }
 
   .render-fields {
-    --spacing-field: var(--base);
+    --spacing-field: var(--spacer-3);
 
     &--margins-small {
-      --spacing-field: var(--base);
+      --spacing-field: var(--spacer-2);
     }
 
     &--margins-none {

test/v4/collections/Row/index.ts

@@ -5,18 +5,179 @@ import { rowFieldsSlug } from '../../slugs.js'
 const RowFields: CollectionConfig = {
   slug: rowFieldsSlug,
   fields: [
+    // Basic 50/50 split
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'firstName',
+          type: 'text',
+          label: 'First Name',
+          admin: { width: '50%' },
+        },
+        {
+          name: 'lastName',
+          type: 'text',
+          label: 'Last Name',
+          admin: { width: '50%' },
+        },
+      ],
+    },
+    // Three column layout
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'city',
+          type: 'text',
+          label: 'City',
+          admin: { width: '50%' },
+        },
+        {
+          name: 'state',
+          type: 'text',
+          label: 'State',
+          admin: { width: '25%' },
+        },
+        {
+          name: 'zip',
+          type: 'text',
+          label: 'Zip',
+          admin: { width: '25%' },
+        },
+      ],
+    },
+    // Mixed field types
     {
       type: 'row',
       fields: [
         {
           name: 'email',
           type: 'email',
           label: 'Email',
+          admin: { width: '50%' },
+        },
+        {
+          name: 'phone',
+          type: 'text',
+          label: 'Phone',
+          admin: { width: '25%' },
+        },
+        {
+          name: 'newsletter',
+          type: 'checkbox',
+          label: 'Subscribe to newsletter',
+          admin: { width: '25%' },
+        },
+      ],
+    },
+    // Select and number in row
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'category',
+          type: 'select',
+          label: 'Category',
+          options: [
+            { label: 'Option A', value: 'a' },
+            { label: 'Option B', value: 'b' },
+            { label: 'Option C', value: 'c' },
+          ],
+          admin: { width: '50%' },
+        },
+        {
+          name: 'quantity',
+          type: 'number',
+          label: 'Quantity',
+          admin: { width: '50%' },
+        },
+      ],
+    },
+    // Auto width (no explicit width set)
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'autoWidthA',
+          type: 'text',
+          label: 'Auto Width A',
+        },
+        {
+          name: 'autoWidthB',
+          type: 'text',
+          label: 'Auto Width B',
+        },
+      ],
+    },
+    // Mixed explicit and auto widths
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'explicit30',
+          type: 'text',
+          label: '30% Width',
+          admin: { width: '30%' },
+        },
+        {
+          name: 'autoFill',
+          type: 'text',
+          label: 'Auto Fill Remaining',
+        },
+      ],
+    },
+    // Four equal columns
+    {
+      type: 'row',
+      fields: [
+        {
+          name: 'q1',
+          type: 'text',
+          label: 'Q1',
+          admin: { width: '25%' },
         },
         {
-          name: 'password',
+          name: 'q2',
           type: 'text',
-          label: 'Password',
+          label: 'Q2',
+          admin: { width: '25%' },
+        },
+        {
+          name: 'q3',
+          type: 'text',
+          label: 'Q3',
+          admin: { width: '25%' },
+        },
+        {
+          name: 'q4',
+          type: 'text',
+          label: 'Q4',
+          admin: { width: '25%' },
+        },
+      ],
+    },
+    // Collapsibles in a row
+    {
+      type: 'row',
+      fields: [
+        {
+          type: 'collapsible',
+          label: 'Billing Address',
+          admin: { width: '50%' },
+          fields: [
+            { name: 'billingStreet', type: 'text', label: 'Street' },
+            { name: 'billingCity', type: 'text', label: 'City' },
+          ],
+        },
+        {
+          type: 'collapsible',
+          label: 'Shipping Address',
+          admin: { width: '50%' },
+          fields: [
+            { name: 'shippingStreet', type: 'text', label: 'Street' },
+            { name: 'shippingCity', type: 'text', label: 'City' },
+          ],
         },
       ],
     },