Stick a standard side sheet under the top safe area and the scaffold's sticky app bar

The standard sheet was sticky at `top: 0` and `100dvh` tall, so in an
installed app with a status bar its head row and close button slid under
the status bar once the page scrolled, where the modal sheet already
starts at `--material-safe-top`. Inside `<x-scaffold>` a sticky
`<x-app-bar>` in the `top` slot spans the content region, sheet and all,
and covered it the same way, safe area or not. The sheet now sticks at
`--drawer-top`, the top safe area, or under a scaffold's sticky bar that
safe area plus the bar's 64px row (just the row, if taller than the safe
area, for a medium or large bar, which collapses to it), and is as tall
as the window below that. Every side sheet keeps the bottom safe area
inside its bottom padding. A browser test scrolls a standard sheet in a
scaffold with no bar, a small bar and a large bar at a 47px top and 34px
bottom inset and measures where it sticks, its foot, its close button
and its padding; it fails without the change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/css/components/drawer.css

@@ -89,6 +89,7 @@
         flex-direction: column;
         overflow-y: auto;
         padding: var(--md-sys-measurement-space300);
+        padding-block-end: calc(var(--md-sys-measurement-space300) + var(--material-safe-bottom, env(safe-area-inset-bottom)));
         background-color: var(--md-sys-color-surface-container-low);
         color: var(--md-sys-color-on-surface);
         box-shadow: var(--md-sys-elevation-1);
@@ -147,14 +148,18 @@
 
     /* Co-planar from expanded: sticky beside the content, no scrim, no elevation, flat on
        `surface` with an outline-variant rule down the inner edge instead. It only fades here —
-       an in-flow box does not travel like an overlay does. */
+       an in-flow box does not travel like an overlay does. It sticks under the top safe area
+       (`--drawer-top`), as tall as the window below it, and its padding keeps its foot clear of
+       the bottom one, so a status bar never covers its head once the page scrolls. */
     @media (width >= 840px) {
         [data-md-drawer][data-md-standard] {
+            --drawer-top: var(--material-safe-top, env(safe-area-inset-top));
+
             position: sticky;
-            top: 0;
+            top: var(--drawer-top);
             display: flex;
             justify-content: flex-end;
-            height: 100dvh;
+            height: calc(100dvh - var(--drawer-top));
             flex-shrink: 0;
             align-self: flex-start;
             overflow: clip;
@@ -165,6 +170,19 @@
             transition-timing-function: var(--md-sys-motion-easing-emphasized-accelerate);
         }
 
+        /* In <x-scaffold>, a sticky `<x-app-bar>` in the `top` slot spans the content region, sheet
+           and all, so the sheet sticks under it: a small, centre-aligned or search bar is its 64px
+           row (AppBarSmallTokens.ContainerHeight) under the safe area it pads itself with; a medium
+           or large bar collapses to that 64px row alone, which the safe area may still be taller
+           than. */
+        [data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]) [data-md-drawer][data-md-standard] {
+            --drawer-top: calc(var(--material-safe-top, env(safe-area-inset-top)) + 64px);
+        }
+
+        [data-md-scaffold-content]:has(> [data-md-app-bar][data-md-sticky]:is([data-md-variant='medium'], [data-md-variant='large'])) [data-md-drawer][data-md-standard] {
+            --drawer-top: max(var(--material-safe-top, env(safe-area-inset-top)), 64px);
+        }
+
         /* A start sheet sits at the start edge, with the gap after it. */
         [data-md-drawer][data-md-standard]:where(:has(> [data-md-drawer-sheet][data-md-side='start'])) {
             justify-content: flex-start;