noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Andreas Reinhold / reini
2026-09-17 06:06:23 +02:00
co-authored by Claude Opus 5
parent 94a376a4fd
commit 207270a23d
5 changed files with 79 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ContainmentTest.php
+49
View File
@@ -783,6 +783,55 @@ it('draws a standard side sheet that starts open standing open, without growing
$page->assertScript("{$root}.getAnimations({ subtree: true }).length > 0");
});
it('sticks a standard side sheet under the top safe area and a scaffold\'s sticky app bar, clear of the bottom one', function () {
Route::middleware('web')->get('/standard-sheet-safe-probe/{bar}', fn (string $bar) => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
<style>:root { --material-safe-top: 47px; --material-safe-bottom: 34px; }</style>
</head>
<body>
<x-scaffold :destinations="[['title' => 'Plans', 'icon' => 'event', 'url' => '/standard-sheet-safe-probe/none', 'active' => true]]">
@if ($bar !== 'none')
<x-slot:top><x-app-bar title="Plan" :variant="$bar" /></x-slot:top>
@endif
<x-row align="stretch" gap="space300" x-data="{ open: true }">
<x-stack style="flex: 1 1 0%; min-width: 0;"><p style="block-size: 3000px">The plan</p></x-stack>
<x-drawer standard title="Filters" id="safe-sheet">Filter the list</x-drawer>
</x-row>
</x-scaffold>
@livewireScripts
</body>
</html>
BLADE, ['bar' => $bar]));
$sheet = "document.getElementById('safe-sheet')";
$top = fn (string $element): string => "Math.round({$element}.getBoundingClientRect().top)";
// Where the sheet sticks once the page has scrolled: below the status bar alone, below a small
// bar's 64px row and the safe area it pads itself with, and below the 64px a large bar
// collapses to; its foot at the window's, with the bottom inset inside its padding.
foreach (['none' => 47, 'small' => 111, 'large' => 64] as $bar => $expected) {
$page = visit("/standard-sheet-safe-probe/{$bar}")->resize(1000, 800)->waitForEvent('networkidle')
->assertScript("typeof window.Alpine !== 'undefined' && {$sheet}.parentElement.hasAttribute('data-md-drawer-settled')");
$page->script('window.scrollTo(0, 600)');
$page->assertScript("{$top($sheet.'.parentElement')} === {$expected}")
->assertScript("Math.round({$sheet}.getBoundingClientRect().bottom) === 800")
->assertScript("{$top($sheet.".querySelector('[data-md-drawer-close]')")} >= {$expected}")
->assertScript("getComputedStyle({$sheet}).paddingBottom === '58px'");
if ($bar !== 'none') {
$page->assertScript("Math.round(document.querySelector('[data-md-app-bar-row]').getBoundingClientRect().bottom) <= {$expected}");
}
}
});
it('opens a row\'s opener from a press anywhere on the row, but not from its own buttons', function () {
$page = containment();