fix: set min-width in form-item content (#9457)

Author: DiegoCardoso

packages/form-layout/src/styles/vaadin-form-item-styles.js

@@ -42,6 +42,7 @@ export const formItemStyles = css`
 
   #content {
     flex: 1 1 auto;
+    min-width: 0;
   }
 
   #content ::slotted(.full-width) {

packages/form-layout/test/visual/lumo/form-layout-auto-responsive.test.js

@@ -123,9 +123,6 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'min-columns-narrow-container');
     });
 
-    // TODO There is an issue with native inputs not shrinking, leading to
-    //  overflowing items. The baseline image should be updated one this
-    //  issue is fixed.
     it('labelsAside', async () => {
       element.labelsAside = true;
       container.style.width = '800px';

packages/form-layout/test/visual/lumo/form-layout.test.js

@@ -1,9 +1,11 @@
 import { nextFrame } from '@vaadin/testing-helpers';
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '@vaadin/text-field';
 import '@vaadin/vaadin-lumo-styles/props.css';
 import '@vaadin/vaadin-lumo-styles/components/form-layout.css';
 import '@vaadin/vaadin-lumo-styles/components/form-item.css';
+import '@vaadin/vaadin-lumo-styles/components/text-field.css';
 import '../../../vaadin-form-layout.js';
 import '../../../vaadin-form-item.js';
 
@@ -103,6 +105,33 @@ describe('form-layout', () => {
     });
   });
 
+  describe('colspan alignment', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <vaadin-form-layout style="width: 645px; padding-inline: 2em;">
+          <vaadin-form-item colspan="2">
+            <label slot="label">Address</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">First Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+
+          <vaadin-form-item>
+            <label slot="label">Last Name</label>
+            <vaadin-text-field class="full-width"></vaadin-text-field>
+          </vaadin-form-item>
+        </vaadin-form-layout>
+      `);
+    });
+
+    it('colspan alignment', async () => {
+      await visualDiff(element, 'colspan-alignment');
+    });
+  });
+
   describe('CSS properties', () => {
     let div;