fix: use baseline alignment on auto responsive form layout (#9865)

Author: ugur-vaadin

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

@@ -88,7 +88,7 @@ export const formLayoutStyles = css`
     grid-auto-columns: 0;
 
     grid-template-columns: repeat(auto-fill, var(--_grid-repeat));
-    justify-items: start;
+    place-items: baseline start;
 
     /*
       Firefox requires min-width on both :host and #layout to allow the layout

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

@@ -287,6 +287,8 @@ describe('form-layout auto responsive', () => {
 
     it('should update layout after adding a field to a row', async () => {
       const newField = document.createElement('input');
+      // There is a Safari bug that leads to incorrect calculation for baseline alignment of empty inputs
+      newField.placeholder = 'Middle name';
       rows[0].appendChild(newField);
       await nextFrame();
       assertFormLayoutGrid(layout, { columns: 3, rows: 2 });

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

@@ -441,4 +441,21 @@ describe('form-layout auto responsive', () => {
       await visualDiff(container, 'fields-with-explicit-width-expand-fields');
     });
   });
+
+  it('baseline alignment', async () => {
+    element = fixtureSync(
+      `
+        <vaadin-form-layout auto-responsive>
+          <vaadin-form-row>
+            <label style="height: 20px; line-height: 20px; margin: 10px;">Subscribe</label>
+            <input type="checkbox" style="width: 20px; height: 20px; margin: 20px;" />
+            <textarea placeholder="Comments" style="height: 60px; padding: 8px;"></textarea>
+          </vaadin-form-row>
+        </vaadin-form-layout>
+      `,
+      container,
+    );
+    await nextResize(element);
+    await visualDiff(container, 'baseline-alignment');
+  });
 });