feat: ensure fields always fit in columns

vaadin · Mar 4, 2025 · 697830a · 697830a
1 parent cab202d
commit 697830a
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 1 deletion.
diff --git a/packages/form-layout/src/vaadin-form-layout-mixin.js b/packages/form-layout/src/vaadin-form-layout-mixin.js
@@ -475,6 +475,10 @@ export const FormLayoutMixin = (superClass) =>
             child.style.removeProperty('--_grid-colspan');
           }
 
+          if (child.localName === 'vaadin-form-item' && child.$) {
+            child.$.content.setAttribute('auto-responsive', '');
+          }
+
           maxColumns = Math.max(maxColumns, columnCount);
         });
 

diff --git a/packages/form-layout/src/vaadin-form-layout-styles.js b/packages/form-layout/src/vaadin-form-layout-styles.js
@@ -111,6 +111,8 @@ export const formLayoutStyles = css`
 
     /* By default, place each child on a new row */
     grid-column: 1 / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
   :host([auto-responsive][auto-rows]) #layout ::slotted(*) {
@@ -161,6 +163,8 @@ export const formRowStyles = css`
     --_form-item-labels-aside: inherit;
 
     grid-column: auto / span min(var(--_grid-colspan, 1), var(--_grid-rendered-column-count));
+    box-sizing: border-box;
+    max-width: 100%;
   }
 
   ::slotted(:first-child) {
@@ -177,7 +181,7 @@ export const formItemStyles = css`
     display: inline-flex;
     align-items: var(--_form-item-labels-aside, baseline);
     flex-flow: var(--_form-item-labels-above, column) nowrap;
-    justify-self: stretch;
+    align-self: stretch;
     margin: calc(0.5 * var(--vaadin-form-item-row-spacing, var(--vaadin-form-layout-row-spacing, 1em))) 0;
   }
 
@@ -207,6 +211,11 @@ export const formItemStyles = css`
     flex: 1 1 auto;
   }
 
+  #content[auto-responsive] ::slotted(*) {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+
   #content ::slotted(.full-width) {
     box-sizing: border-box;
     width: 100%;

diff --git a/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js
@@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'colspan-with-explicit-rows');
     });
   });
+
+  describe('fields with explicit width', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive column-width="15em">
+            <vaadin-form-row>
+              <input placeholder="First name" style="width: 10em" />
+              <input placeholder="Last Name" style="width: 20em" />
+            </vaadin-form-row>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input style="width: 10em" />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input style="width: 20em" />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'fields-with-explicit-width');
+    });
+  });
 });
diff --git a/...screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/...screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png
diff --git a/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js b/packages/form-layout/test/visual/material/form-layout-auto-responsive.test.js
@@ -354,4 +354,35 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'colspan-with-explicit-rows');
     });
   });
+
+  describe('fields with explicit width', () => {
+    beforeEach(async () => {
+      element = fixtureSync(
+        `
+          <vaadin-form-layout auto-responsive column-width="15em">
+            <vaadin-form-row>
+              <input placeholder="First name" style="width: 10em" />
+              <input placeholder="Last Name" style="width: 20em" />
+            </vaadin-form-row>
+            <vaadin-form-row>
+              <vaadin-form-item>
+                <label slot="label">Phone</label>
+                <input style="width: 10em" />
+              </vaadin-form-item>
+              <vaadin-form-item>
+                <label slot="label">Email</label>
+                <input style="width: 20em" />
+              </vaadin-form-item>
+            </vaadin-form-row>
+          </vaadin-form-layout>
+        `,
+        container,
+      );
+      await nextFrame();
+    });
+
+    it('default', async () => {
+      await visualDiff(container, 'fields-with-explicit-width');
+    });
+  });
 });
diff --git a/...screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/...screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png