diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png index 05dfa3c8b75..a13f4068169 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-column-layout.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png index 36f69d2eab7..4161208f1e9 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/flex-layout.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png index b2859f342f4..d10eea1b854 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png index 630ad436ec1..4b17cf05548 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-aside-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png index 3e3f9be5c2b..972c3c471d0 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png index 8bcf57d5a57..f7207310bd5 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-default-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png index 3e3f9be5c2b..972c3c471d0 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png index 8bcf57d5a57..f7207310bd5 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/ltr-editor-position-fullscreen-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png index a0fed472196..0d2b5edfb44 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png index c44ee578181..3ab2ff6179d 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-aside-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png index a6324e2e7bb..bd60b1f0c5a 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png index 21454928b06..1e6f0fb915a 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-default-new.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png index a6324e2e7bb..bd60b1f0c5a 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-edit.png differ diff --git a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png index 21454928b06..1e6f0fb915a 100644 Binary files a/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png and b/packages/crud/test/visual/base/screenshots/crud/baseline/rtl-editor-position-fullscreen-new.png differ diff --git a/packages/form-layout/src/styles/vaadin-form-item-base-styles.js b/packages/form-layout/src/styles/vaadin-form-item-base-styles.js index e1bc0485fa2..3e375d97f21 100644 --- a/packages/form-layout/src/styles/vaadin-form-item-base-styles.js +++ b/packages/form-layout/src/styles/vaadin-form-item-base-styles.js @@ -16,7 +16,6 @@ export const formItemStyles = css` display: inline-flex; flex-flow: var(--_form-item-labels-above, column) nowrap; justify-self: stretch; - margin: calc(0.5 * var(--_row-spacing, 1em)) 0; } :host([label-position='top']) { diff --git a/packages/form-layout/src/styles/vaadin-form-layout-base-styles.js b/packages/form-layout/src/styles/vaadin-form-layout-base-styles.js index f0a75f95e1c..f880fd83fe2 100644 --- a/packages/form-layout/src/styles/vaadin-form-layout-base-styles.js +++ b/packages/form-layout/src/styles/vaadin-form-layout-base-styles.js @@ -38,10 +38,16 @@ export const formLayoutStyles = css` display: none !important; } + :host(:not([auto-responsive])) { + contain: layout; + } + :host(:not([auto-responsive])) #layout { align-items: baseline; /* default \`stretch\` is not appropriate */ display: flex; flex-wrap: wrap; /* the items should wrap */ + /* Compensate for row spacing */ + margin-block: calc(-0.5 * var(--_row-spacing)); } :host(:not([auto-responsive])) #layout ::slotted(*) { @@ -49,8 +55,9 @@ export const formLayoutStyles = css` flex-grow: 0; flex-shrink: 0; - /* Margins make spacing between the columns */ + /* Margins make spacing between the columns and rows */ margin-inline: calc(0.5 * var(--_column-spacing)); + margin-block: calc(0.5 * var(--_row-spacing)); } #layout ::slotted(br) { diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width-expand-fields.png b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width-expand-fields.png index a9fe401a79b..cc27696c504 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width-expand-fields.png and b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width-expand-fields.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png index bbf5a77765f..d98ba160784 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png and b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/fields-with-explicit-width.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows-labels-aside.png b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows-labels-aside.png index d6af24d3923..782ca0f7464 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows-labels-aside.png and b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows-labels-aside.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows.png b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows.png index c4382c8c00d..0ac2b284226 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows.png and b/packages/form-layout/test/visual/base/screenshots/form-layout-auto-responsive/baseline/form-items-with-explicit-rows.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/basic.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/basic.png index 464c114db30..b4641310ec9 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/basic.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/basic.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/br.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/br.png index 30bc7500905..e229980a872 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/br.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/br.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan-alignment.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan-alignment.png index 8b77ffb4e2f..7efb14dd63a 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan-alignment.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan-alignment.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan.png index 6291e97ba17..e70bfc345ca 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/colspan.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/css-properties.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/css-properties.png index ed32787df16..56e65757973 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/css-properties.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/css-properties.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/ltr-container-overflow.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/ltr-container-overflow.png index e811e503c83..53f305ffdcd 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/ltr-container-overflow.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/ltr-container-overflow.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png index cf9d0f48e34..eecf1bf1506 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-aside.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png index 44e81ed0e6e..87677d06947 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/required-indicator-labels-on-top.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/responsive-steps.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/responsive-steps.png index 52efd2de6b8..d056b64bb9d 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/responsive-steps.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/responsive-steps.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/rtl-container-overflow.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/rtl-container-overflow.png index 7b98199c76b..a3616e0dc2f 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/rtl-container-overflow.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/rtl-container-overflow.png differ diff --git a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/single-column.png b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/single-column.png index be81b60df11..e9185face70 100644 Binary files a/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/single-column.png and b/packages/form-layout/test/visual/base/screenshots/form-layout/baseline/single-column.png differ diff --git a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/css-properties.png b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/css-properties.png index c99758cd359..7bed556ed2e 100644 Binary files a/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/css-properties.png and b/packages/form-layout/test/visual/lumo/screenshots/form-layout/baseline/css-properties.png differ