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>
This commit is contained in:
co-authored by
Claude Opus 5
parent
207270a23d
commit
a6dc213e67
@@ -213,6 +213,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Before the view has settled, a sheet not rendered open is out of the layout already. The
|
||||
view writes `data-md-drawer-collapsed` and measures the row's gap only once Alpine runs,
|
||||
so until then a closed sheet would be a zero-wide flex item that still costs its row one
|
||||
gap, and the content beside it would widen when the script started. A sheet whose
|
||||
`wire:model` property is open is rendered `data-md-open` and stands at its width. */
|
||||
[data-md-drawer][data-md-standard]:not([data-md-open], [data-md-drawer-settled]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Until the view settles (`data-md-drawer-settled`, two frames after Alpine starts), the
|
||||
state the page loads with is drawn at once: a sheet that starts open does not grow in. */
|
||||
[data-md-drawer][data-md-standard]:not([data-md-drawer-settled]),
|
||||
|
||||
Reference in New Issue
Block a user