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>
This commit is contained in:
co-authored by
Claude Opus 5
parent
94a376a4fd
commit
207270a23d
@@ -49,6 +49,11 @@
|
||||
sheet opened from a modal sheet but rendered elsewhere on the page was also hidden from screen
|
||||
readers by the sheet's `aria-hidden`, and Tab could not move inside the dialog; both work now.
|
||||
An application's own guard around a sheet's Escape can go.
|
||||
- **A standard `<x-drawer>` sticks under the top safe area** (`--material-safe-top`, else the
|
||||
device's inset) instead of at the window's edge, so its head and close button no longer slide
|
||||
under an installed app's status bar as the page scrolls; inside `<x-scaffold>` it also sticks
|
||||
under a sticky `<x-app-bar>` in the `top` slot, which covered it. It is as tall as the window
|
||||
below that, and every side sheet keeps the bottom safe area inside its bottom padding.
|
||||
|
||||
## From 2.0.0 to 2.1.0
|
||||
|
||||
|
||||
Reference in New Issue
Block a user