@navikt/ds-css 7.39.0 → 7.40.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-css
 
+## 7.40.0
+
+## 7.39.1
+
+### Patch Changes
+
+- Modal, Dialog: Handle scroll for extreme zoom-levels better. ([#4488](https://github.com/navikt/aksel/pull/4488))
+
 ## 7.39.0
 
 ### Minor Changes

package/darkside/dialog.darkside.css

@@ -25,6 +25,11 @@
     --__axc-dialog-p-i: var(--ax-space-16);
   }
 
+  /* Needed to accommodate 400% zoom */
+  @media (max-height: 400px) {
+    overflow: auto;
+  }
+
   &[data-entering-style],
   &[data-exiting-style] {
     /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
@@ -231,6 +236,11 @@
     100% 16px;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
+
+  /* Needed to accommodate 400% zoom */
+  @media (max-height: 400px) {
+    overflow: unset;
+  }
 }
 
 .aksel-dialog__footer {

package/darkside/modal.darkside.css

@@ -152,6 +152,11 @@
     100% 16px;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
+
+  /* Needed to accommodate 400% zoom */
+  @media (max-height: 400px) {
+    overflow: unset;
+  }
 }
 
 .aksel-modal__header + .aksel-modal__body {

package/dialog.css

@@ -25,6 +25,11 @@
     --__ac-dialog-p-i: var(--a-spacing-4);
   }
 
+  /* Needed to accommodate 400% zoom */
+  @media (max-height: 400px) {
+    overflow: auto;
+  }
+
   &[data-entering-style],
   &[data-exiting-style] {
     /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
@@ -231,6 +236,11 @@
     100% 16px;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
+
+  /* Needed to accommodate 400% zoom */
+  @media (max-height: 400px) {
+    overflow: unset;
+  }
 }
 
 .navds-dialog__footer {

package/dist/component/dialog.css

@@ -26,6 +26,15 @@
     --__ac-dialog-p-i: var(--a-spacing-4);
   }
 
+/* Needed to accommodate 400% zoom */
+
+@media (max-height: 400px) {
+
+.navds-dialog__popup {
+    overflow: auto;
+}
+  }
+
 .navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style] {
     /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
     opacity: 0.001;
@@ -208,11 +217,12 @@
   float: right;
 }
 
-.navds-dialog__header ~ .navds-dialog__body {
-    padding-block-start: 0;
-  }
-
 .navds-dialog__body {
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 
   background:
     linear-gradient(var(--a-surface-default) 30%, transparent) top,
@@ -226,13 +236,21 @@
     100% 16px;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-  overflow: auto;
-  overscroll-behavior: contain;
-  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+
+  /* Needed to accommodate 400% zoom */
 }
 
+.navds-dialog__header ~ .navds-dialog__body {
+    padding-block-start: 0;
+  }
+
+@media (max-height: 400px) {
+
+.navds-dialog__body {
+    overflow: unset;
+}
+  }
+
 .navds-dialog__footer {
   justify-content: flex-end;
   display: flex;

package/dist/component/dialog.min.css

@@ -1 +1 @@
-.navds-dialog__popup{--__ac-dialog-transform: ;--__ac-dialog-p-b:var(--a-spacing-4);--__ac-dialog-p-i:var(--a-spacing-5);background-color:var(--a-surface-default);border:1px solid var(--a-border-subtle);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.navds-dialog__popup:focus{outline:none}.navds-dialog__popup[data-size=small]{--__ac-dialog-p-b:var(--a-spacing-3);--__ac-dialog-p-i:var(--a-spacing-4)}.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__ac-dialog-transform)}.navds-dialog__popup[data-exiting-style]{transition-duration:.1s}.navds-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.navds-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.navds-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.navds-dialog__popup:after{background-color:var(--a-surface-backdrop);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity 0s cubic-bezier(.25,.46,.45,.94);z-index:1}.navds-dialog__popup[data-position=center]{--__ac-dialog-center-margin:3rem;--__ac-dialog-transform:scale(0.98);left:0;margin-block:max(var(--__ac-dialog-center-margin),10dvh) auto;margin-inline:auto;max-height:calc(90dvh - var(--__ac-dialog-center-margin));max-width:calc(100dvw - 3rem);right:0;top:0}.navds-dialog__popup[data-position=center][data-nested=true][data-entering-style],.navds-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transform:scale(1);transition-duration:0s}.navds-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}@media (max-width:479px) or (max-height:479px){.navds-dialog__popup[data-position=center]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-block:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0;top:auto}}.navds-dialog__popup[data-position=left],.navds-dialog__popup[data-position=right]{bottom:0;max-width:calc(100vw - max(16px, 10vw));top:0}[data-nested-dialog-open=true]:is(.navds-dialog__popup[data-position=right],.navds-dialog__popup[data-position=left]):after{opacity:1;transition-duration:.1s}.navds-dialog__popup[data-position=right]{--__ac-dialog-transform:translateX(35%);border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;right:0}.navds-dialog__popup[data-position=left]{--__ac-dialog-transform:translateX(-35%);border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0}.navds-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}.navds-dialog__popup[data-position=fullscreen]{--__ac-dialog-transform:scale(0.98);border:0;border-radius:0;height:100%;inset:0;max-height:100dvh;max-width:100dvw;width:100%}.navds-dialog__backdrop{background-color:var(--a-surface-backdrop);inset:0;min-height:100dvh;position:fixed;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);z-index:2000}@supports (-webkit-touch-callout:none){.navds-dialog__backdrop{position:absolute}}.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style]{opacity:.001}.navds-dialog__header{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__title{-webkit-margin-after:var(--a-spacing-1);margin-block-end:var(--a-spacing-1)}.navds-dialog__close-button{align-self:start;float:right}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}.navds-dialog__body{background:linear-gradient(var(--a-surface-default) 30%,#0000) top,linear-gradient(#0000,var(--a-surface-default) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;overflow:auto;overscroll-behavior:contain;position:relative}.navds-dialog__body,.navds-dialog__footer{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-end}
+.navds-dialog__popup{--__ac-dialog-transform: ;--__ac-dialog-p-b:var(--a-spacing-4);--__ac-dialog-p-i:var(--a-spacing-5);background-color:var(--a-surface-default);border:1px solid var(--a-border-subtle);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.navds-dialog__popup:focus{outline:none}.navds-dialog__popup[data-size=small]{--__ac-dialog-p-b:var(--a-spacing-3);--__ac-dialog-p-i:var(--a-spacing-4)}@media (max-height:400px){.navds-dialog__popup{overflow:auto}}.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__ac-dialog-transform)}.navds-dialog__popup[data-exiting-style]{transition-duration:.1s}.navds-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.navds-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.navds-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.navds-dialog__popup:after{background-color:var(--a-surface-backdrop);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity 0s cubic-bezier(.25,.46,.45,.94);z-index:1}.navds-dialog__popup[data-position=center]{--__ac-dialog-center-margin:3rem;--__ac-dialog-transform:scale(0.98);left:0;margin-block:max(var(--__ac-dialog-center-margin),10dvh) auto;margin-inline:auto;max-height:calc(90dvh - var(--__ac-dialog-center-margin));max-width:calc(100dvw - 3rem);right:0;top:0}.navds-dialog__popup[data-position=center][data-nested=true][data-entering-style],.navds-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transform:scale(1);transition-duration:0s}.navds-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}@media (max-width:479px) or (max-height:479px){.navds-dialog__popup[data-position=center]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-block:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0;top:auto}}.navds-dialog__popup[data-position=left],.navds-dialog__popup[data-position=right]{bottom:0;max-width:calc(100vw - max(16px, 10vw));top:0}[data-nested-dialog-open=true]:is(.navds-dialog__popup[data-position=right],.navds-dialog__popup[data-position=left]):after{opacity:1;transition-duration:.1s}.navds-dialog__popup[data-position=right]{--__ac-dialog-transform:translateX(35%);border-bottom-right-radius:0;border-right:0;border-top-right-radius:0;right:0}.navds-dialog__popup[data-position=left]{--__ac-dialog-transform:translateX(-35%);border-bottom-left-radius:0;border-left:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0}.navds-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}.navds-dialog__popup[data-position=fullscreen]{--__ac-dialog-transform:scale(0.98);border:0;border-radius:0;height:100%;inset:0;max-height:100dvh;max-width:100dvw;width:100%}.navds-dialog__backdrop{background-color:var(--a-surface-backdrop);inset:0;min-height:100dvh;position:fixed;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);z-index:2000}@supports (-webkit-touch-callout:none){.navds-dialog__backdrop{position:absolute}}.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style]{opacity:.001}.navds-dialog__header{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__title{-webkit-margin-after:var(--a-spacing-1);margin-block-end:var(--a-spacing-1)}.navds-dialog__close-button{align-self:start;float:right}.navds-dialog__body{background:linear-gradient(var(--a-surface-default) 30%,#0000) top,linear-gradient(#0000,var(--a-surface-default) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;overflow:auto;overscroll-behavior:contain;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i);position:relative}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}@media (max-height:400px){.navds-dialog__body{overflow:unset}}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-end;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}

package/dist/component/modal.css

@@ -121,7 +121,14 @@
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+
+  /* Needed to accommodate 400% zoom */
+}
+@media (max-height: 400px) {
+.navds-modal__body {
+    overflow: unset;
 }
+  }
 .navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
   background:
     linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,

package/dist/component/modal.min.css

@@ -1 +1 @@
-.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .7s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:-webkit-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .7s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:-webkit-fit-content;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}
+.navds-modal__document-body{overflow:hidden}.navds-modal{--__ac-modal-bg:var(--ac-modal-bg,var(--a-surface-default));background-color:var(--__ac-modal-bg);border:none;border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);inset:0;margin:auto;max-height:100%;max-width:100%;padding:0;position:fixed;z-index:9999}.navds-modal[open]{animation:akselModalFadeIn .7s cubic-bezier(.15,1,.3,1);display:flex;flex-direction:column}.navds-modal--polyfilled{bottom:unset;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;right:0;top:50%;transform:translateY(-50%);width:-webkit-fit-content;width:fit-content}.navds-modal--polyfilled .navds-modal--polyfilled{overflow:auto}.navds-modal--polyfilled:not([open]){display:none}._dialog_overlay{bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal--small{width:var(--ac-modal-width-small,450px)}.navds-modal--medium{width:var(--ac-modal-width-medium,700px)}@media (min-width:480px){.navds-modal{max-width:calc(100% - 2em)}.navds-modal--autowidth{max-width:min(700px,calc(100% - 2em))}}@media (min-height:480px){.navds-modal{max-height:calc(100% - 2em)}.navds-modal--top{margin-top:2em;max-height:calc(100% - 4em)}}.navds-modal::backdrop{animation:akselModalBackdropFadeIn .7s cubic-bezier(.15,1,.3,1);background:var(--ac-modal-backdrop,#0214317d)}.navds-modal--polyfilled+.backdrop{background:var(--ac-modal-backdrop,#0214317d);bottom:0;left:0;position:fixed;right:0;top:0}.navds-modal__button{float:right;margin-left:var(--a-spacing-4)}.navds-modal__header{padding:var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-4) var(--a-spacing-6)}.navds-modal--small .navds-modal__header{padding:var(--a-spacing-4) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4)}.navds-modal__header-icon svg{display:inline;margin-right:var(--a-spacing-1);vertical-align:-.25rem}.navds-modal__label{color:var(--a-text-subtle);font-weight:600}.navds-modal__body{overflow:auto;overscroll-behavior:contain;padding:var(--a-spacing-6);position:relative}@media (max-height:400px){.navds-modal__body{overflow:unset}}.navds-modal:not(.navds-modal--polyfilled) .navds-modal__body{background:linear-gradient(var(--__ac-modal-bg) 30%,#0000) top,linear-gradient(#0000,var(--__ac-modal-bg) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px}.navds-modal--small .navds-modal__body{padding:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-4)}.navds-modal__header+.navds-modal__body{padding-top:var(--a-spacing-0)}.navds-modal__footer{display:flex;flex-flow:row-reverse wrap;gap:var(--a-spacing-4);padding:var(--a-spacing-4) var(--a-spacing-6) var(--a-spacing-6) var(--a-spacing-6)}.navds-modal--small .navds-modal__footer{padding:var(--a-spacing-4)}.navds-modal__footer :nth-of-type(2){margin-left:auto}.navds-modal--polyfilled .navds-modal--polyfilled.navds-date__nested-modal{animation:none;max-height:100vh;max-width:100vw;min-width:-webkit-fit-content;min-width:fit-content}@keyframes akselModalFadeIn{0%{opacity:.0001;transform:translate3d(0,4px,0)}50%{opacity:1}to{transform:none}}@keyframes akselModalBackdropFadeIn{0%{opacity:.0001}50%{opacity:1}to{opacity:1}}@media (forced-colors:active){.navds-modal{outline:2px solid #0000}}

package/dist/components.css

@@ -2020,6 +2020,15 @@
     --__ac-dialog-p-i: var(--a-spacing-4);
   }
 
+/* Needed to accommodate 400% zoom */
+
+@media (max-height: 400px) {
+
+.navds-dialog__popup {
+    overflow: auto;
+}
+  }
+
 .navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style] {
     /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
     opacity: 0.001;
@@ -2202,11 +2211,12 @@
   float: right;
 }
 
-.navds-dialog__header ~ .navds-dialog__body {
-    padding-block-start: 0;
-  }
-
 .navds-dialog__body {
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+  overflow: auto;
+  overscroll-behavior: contain;
+  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
 
   background:
     linear-gradient(var(--a-surface-default) 30%, transparent) top,
@@ -2220,12 +2230,20 @@
     100% 16px;
   background-attachment: local, local, scroll, scroll;
   background-repeat: no-repeat;
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-  overflow: auto;
-  overscroll-behavior: contain;
-  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+
+  /* Needed to accommodate 400% zoom */
+}
+
+.navds-dialog__header ~ .navds-dialog__body {
+    padding-block-start: 0;
+  }
+
+@media (max-height: 400px) {
+
+.navds-dialog__body {
+    overflow: unset;
 }
+  }
 
 .navds-dialog__footer {
   justify-content: flex-end;
@@ -5935,8 +5953,17 @@ button.navds-internalheader__title:active,
   overflow: auto;
   overscroll-behavior: contain;
   position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
+
+  /* Needed to accommodate 400% zoom */
 }
 
+@media (max-height: 400px) {
+
+.navds-modal__body {
+    overflow: unset;
+}
+  }
+
 .navds-modal:not(.navds-modal--polyfilled) .navds-modal__body {
   background:
     linear-gradient(var(--__ac-modal-bg) 30%, transparent) top,