diff --git a/components/dialog/dialog-styles.js b/components/dialog/dialog-styles.js index 56303775667..877530228a4 100644 --- a/components/dialog/dialog-styles.js +++ b/components/dialog/dialog-styles.js @@ -68,9 +68,14 @@ export const dialogStyles = css` color: var(--d2l-theme-text-color-static-standard); margin-bottom: 0; /* required to override Chrome native positioning */ margin-top: 0; /* required to override Chrome native positioning */ + overflow: hidden; /* override UA dialog:modal overflow: auto which causes an unexpected scrollbar from sub-pixel rounding */ padding: 0; } + dialog.d2l-dialog-outer.d2l-dialog-outer-full-height { + height: auto; /* override UA dialog height: fix-content */ + } + dialog::backdrop { /* fallback is for old browsers (see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element) */ background-color: var(--d2l-theme-backdrop-background-color, #f9fbff); diff --git a/components/dialog/test/dialog-confirm.vdiff.js b/components/dialog/test/dialog-confirm.vdiff.js index 7c453b636eb..61162ff9108 100644 --- a/components/dialog/test/dialog-confirm.vdiff.js +++ b/components/dialog/test/dialog-confirm.vdiff.js @@ -73,6 +73,16 @@ describe('dialog-confirm', () => { ${buttons} + ` }, + { name: 'slighty-larger-critical', template: html` + + OK + + ` }, + { name: 'overflow', template: html` + + ${buttons} + ` } ].forEach(({ name, allColorModes, template }) => { it(name, async() => { diff --git a/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png new file mode 100644 index 00000000000..1af4e668352 Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-overflow.png differ diff --git a/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png new file mode 100644 index 00000000000..bf232da8003 Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/custom-internal-slighty-larger-critical.png differ diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png index 8565fefaee7..cb234b5d07e 100644 Binary files a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.dark.png differ diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png index 2df365b0414..e317fa3aab5 100644 Binary files a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-critical.png differ diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png new file mode 100644 index 00000000000..9c7b791ca72 Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-overflow.png differ diff --git a/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png new file mode 100644 index 00000000000..13c5a83ab4d Binary files /dev/null and b/components/dialog/test/golden/dialog-confirm/chromium/native-internal-slighty-larger-critical.png differ