Drawer: fix double scrollbar on responsive/modal drawers (#42629)

Reset the native <dialog> UA `overflow: auto` (which made the dialog
itself a scroll container) and add `min-height: 0` to `.drawer-body`
so only the body scrolls. Previously the dialog and body each showed
a scrollbar when drawer content overflowed (e.g. the docs mobile nav).

diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index fd5f78468c7653cc7f3d0e13feb0729509cf698a..d26bcb793e95d46934dc09daeec7f44ce497f363 100644 (file)
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -81,6 +81,7 @@ $drawer-backdrop-tokens: defaults(
         max-height: calc(100% - var(--drawer-inset) * 2);
         padding: 0;
         margin: 0;
+        overflow: hidden;
         color: var(--drawer-color);
         visibility: hidden;
         background-color: var(--drawer-bg);
@@ -288,6 +289,7 @@ $drawer-backdrop-tokens: defaults(
     flex-direction: column;
     gap: var(--drawer-padding-y);
     @include dialog-body(var(--drawer-padding-y) var(--drawer-padding-x));
+    min-height: 0; // allow the body to shrink for inner scrolling
     overflow-y: auto;
   }