Keep a closed standard side sheet out of its row from the first paint

A closed standard sheet is `inline-size: 0` with a negative margin as wide as its row's gap, but the view writes that gap (`--md-drawer-gap`) and `data-md-drawer-collapsed` only once Alpine runs. Until then each closed sheet was a zero-wide flex item that still cost the row one gap, and a sheet bound to an open Livewire property had no width at all, so the content beside them changed width when the script started - two closed sheets beside a column made it 48px narrower, then it jumped. Until the view has settled, drawer.css now takes a standard sheet that is not `data-md-open` out of the layout, and the view renders `data-md-open` on a standard sheet whose `wire:model` property is open (truthy as Alpine reads it), so it stands at its width from the first paint. Transitions still wait for `data-md-drawer-settled`. A browser test measures a column beside two closed sheets (one bound to Livewire, one to Alpine) and an open one before Alpine starts and once settled; it fails without the change. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 06:09:29 +02:00
parent 207270a23d
commit a6dc213e67
4 changed files with 87 additions and 1 deletions
@@ -832,6 +832,64 @@ it('sticks a standard side sheet under the top safe area and a scaffold\'s stick
    }
 });

+class StandardSheetsProbe extends Component
+{
+    public bool $filters = false;
+
+    public ?int $session = 7;
+
+    public function render(): string
+    {
+        return <<<'BLADE'
+            <div>
+                <x-row id="sheets-row" align="stretch" gap="space300" x-data="{ open: false }">
+                    <x-stack id="sheets-column" style="flex: 1 1 0%; min-width: 0;"><p>The session list</p></x-stack>
+                    <x-drawer standard wire:model="filters" title="Filters">Narrow the list down</x-drawer>
+                    <x-drawer standard wire:model="session" title="Session">The open session</x-drawer>
+                    <x-drawer standard title="Notes">Nobody opened these</x-drawer>
+                </x-row>
+                <script>
+                    window.firstPaint = {
+                        column: document.getElementById('sheets-column').getBoundingClientRect().width,
+                        alpine: typeof window.Alpine,
+                    };
+                </script>
+            </div>
+            BLADE;
+    }
+}
+
+it('draws standard side sheets as the server renders them from the first paint, closed ones out of the row and an open one standing', function () {
+    Livewire::component('standard-sheets-probe', StandardSheetsProbe::class);
+
+    Route::middleware('web')->get('/standard-sheets-probe', fn () => Blade::render(<<<'BLADE'
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <x-theme-script />
+                @vite(config('livewire-material.showcase.vite'))
+                @livewireStyles
+            </head>
+            <body>
+                <livewire:standard-sheets-probe />
+                @livewireScripts
+            </body>
+        </html>
+        BLADE));
+
+    // Playwright's window is 1280px wide from the first paint, in the band where the sheets stand
+    // in the row. The column measured before Alpine starts is the column once it has settled: two
+    // closed sheets (one bound to Livewire, one to Alpine) take no gap, and the open one its width.
+    $page = visit('/standard-sheets-probe')->waitForEvent('networkidle')
+        ->assertScript("window.eval('window.firstPaint.alpine') === 'undefined'")
+        ->assertScript("[...document.querySelectorAll('[data-md-drawer]')].every((root) => root.hasAttribute('data-md-drawer-settled'))");
+
+    $settled = $page->script("document.getElementById('sheets-column').getBoundingClientRect().width");
+
+    expect(abs($page->script('window.firstPaint.column') - $settled))->toBeLessThan(1)
+        ->and($page->script("Math.round([...document.querySelectorAll('[data-md-drawer]')][1].getBoundingClientRect().width)"))->toBe(400);
+});
+
 it('opens a row\'s opener from a press anywhere on the row, but not from its own buttons', function () {
    $page = containment();