fix: alignment of collapsible within row (#3822)

packages/payload/src/admin/components/forms/field-types/Row/index.scss

@@ -1,30 +1,34 @@
 @import '../../../../scss/styles.scss';
 
 .field-type.row {
-  display: flex;
-  flex-wrap: wrap;
-  width: calc(100% + var(--base));
-  margin-left: calc(var(--base) * -0.5);
-  margin-right: calc(var(--base) * -0.5);
+  .row__fields {
+    display: flex;
+    flex-wrap: wrap;
+    width: calc(100% + var(--base));
+    margin-left: calc(var(--base) * -0.5);
+    margin-right: calc(var(--base) * -0.5);
 
-  > * {
-    flex-grow: 1;
-    padding-left: calc(var(--base) * 0.5);
-    padding-right: calc(var(--base) * 0.5);
+    > * {
+      flex-grow: 1;
+      padding-left: calc(var(--base) * 0.5);
+      padding-right: calc(var(--base) * 0.5);
+    }
   }
 
   @include mid-break {
-    display: block;
-    margin-left: 0;
-    margin-right: 0;
-    width: 100%;
-
-    > * {
+    .row__fields {
+      display: block;
       margin-left: 0;
       margin-right: 0;
-      width: 100% !important;
-      padding-left: 0;
-      padding-right: 0;
+      width: 100%;
+
+      > * {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100% !important;
+        padding-left: 0;
+        padding-right: 0;
+      }
     }
   }
 }

packages/payload/src/admin/components/forms/field-types/Row/index.tsx

@@ -9,6 +9,8 @@ import { fieldBaseClass } from '../shared'
 import './index.scss'
 import { RowProvider } from './provider'
 
+const baseClass = 'row'
+
 const Row: React.FC<Props> = (props) => {
   const {
     admin: { className, readOnly },
@@ -22,18 +24,21 @@ const Row: React.FC<Props> = (props) => {
 
   return (
     <RowProvider>
-      <RenderFields
-        className={[fieldBaseClass, 'row', className].filter(Boolean).join(' ')}
-        fieldSchema={fields.map((field) => ({
-          ...field,
-          path: createNestedFieldPath(path, field),
-        }))}
-        fieldTypes={fieldTypes}
-        forceRender={forceRender}
-        indexPath={indexPath}
-        permissions={permissions}
-        readOnly={readOnly}
-      />
+      <div className={[fieldBaseClass, baseClass, className].filter(Boolean).join(' ')}>
+        <RenderFields
+          className={`${baseClass}__fields`}
+          fieldSchema={fields.map((field) => ({
+            ...field,
+            path: createNestedFieldPath(path, field),
+          }))}
+          fieldTypes={fieldTypes}
+          forceRender={forceRender}
+          indexPath={indexPath}
+          margins={false}
+          permissions={permissions}
+          readOnly={readOnly}
+        />
+      </div>
     </RowProvider>
   )
 }

test/fields/collections/Row/index.ts

@@ -47,6 +47,33 @@ const RowFields: CollectionConfig = {
         },
       ],
     },
+    {
+      type: 'row',
+      fields: [
+        {
+          label: 'Collapsible within a row',
+          type: 'collapsible',
+          fields: [
+            {
+              name: 'field_within_collapsible_a',
+              label: 'Field within collapsible',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          label: 'Collapsible within a row',
+          type: 'collapsible',
+          fields: [
+            {
+              name: 'field_within_collapsible_b',
+              label: 'Field within collapsible',
+              type: 'text',
+            },
+          ],
+        },
+      ],
+    },
   ],
 }
 

test/fields/e2e.spec.ts

@@ -1445,7 +1445,7 @@ describe('fields', () => {
       await expect(idHeadings).toHaveCount(1)
     })
 
-    test('should render row fields inline', async () => {
+    test('should render row fields inline and with explicit widths', async () => {
       await page.goto(url.create)
       const fieldA = page.locator('input#field-field_with_width_a')
       await expect(fieldA).toBeVisible()
@@ -1453,9 +1453,38 @@ describe('fields', () => {
       await expect(fieldB).toBeVisible()
       const fieldABox = await fieldA.boundingBox()
       const fieldBBox = await fieldB.boundingBox()
-      // give it some wiggle room of like 2px to account for differences in rendering
+
+      // Check that the top value of the fields are the same
+      // Give it some wiggle room of like 2px to account for differences in rendering
+      const tolerance = 2
+      expect(fieldABox.y).toBeLessThanOrEqual(fieldBBox.y + tolerance)
+
+      // Check that the widths of the fields are the same
       const difference = Math.abs(fieldABox.width - fieldBBox.width)
-      expect(difference).toBeLessThanOrEqual(2)
+      expect(difference).toBeLessThanOrEqual(tolerance)
+    })
+
+    test('should render nested row fields in the correct position ', async () => {
+      await page.goto(url.create)
+
+      // These fields are not given explicit `width` values
+      await page.goto(url.create)
+      const fieldA = page.locator('input#field-field_within_collapsible_a')
+      await expect(fieldA).toBeVisible()
+      const fieldB = page.locator('input#field-field_within_collapsible_b')
+      await expect(fieldB).toBeVisible()
+      const fieldABox = await fieldA.boundingBox()
+      const fieldBBox = await fieldB.boundingBox()
+
+      // Check that the top value of the fields are the same
+      // Give it some wiggle room of like 2px to account for differences in rendering
+      const tolerance = 2
+      expect(fieldABox.y).toBeLessThanOrEqual(fieldBBox.y + tolerance)
+
+      // Check that the widths of the fields are the same
+      const collapsibleDifference = Math.abs(fieldABox.width - fieldBBox.width)
+
+      expect(collapsibleDifference).toBeLessThanOrEqual(tolerance)
     })
   })