fix: guard mobile drawer full-height column for WorkspaceSwitcher anchor
MOBILE-SHELL-PARITY defect 3. Static audit (code + @primeuix base CSS) shows the mobile drawer content is ALREADY a correct full-height flex column: .p-drawer-left .p-drawer-content gets height:100% + flex-grow:1 from base styles, our pt makes it flex flex-col, SidebarNav (flex-1 min-h-0) claims the slack and WorkspaceSwitcher (flex-shrink-0) anchors at the bottom — matching the desktop aside. Add min-h-0 as flex hygiene (children shrink, nav scrolls internally) and document the chain in-code, citing the @primeuix rules. The 'broken height chain' premise did not match the code, so no redundant height fix was fabricated. If WorkspaceSwitcher is still clipped on a real mobile device, the remaining suspect is dynamic-viewport-height (a shrinking address bar making 100% exceed the visual viewport) — flagged for a real-device visual check at the merge gate. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -124,6 +124,23 @@ const mobileVisible = computed<boolean>({
|
||||
SidebarHeader's brand row, which renders an X ("Sluit menu") on mobile —
|
||||
a single, non-overlapping control in the same top-right slot the desktop
|
||||
sidebar uses for its collapse chevron. No duplicate, no overlap.
|
||||
|
||||
Bottom anchoring (MOBILE-SHELL-PARITY defect 3 — WorkspaceSwitcher):
|
||||
the content pt is a full-height flex COLUMN (`flex flex-col h-full
|
||||
min-h-0`). PrimeVue's @primeuix base styles already give
|
||||
`.p-drawer-left .p-drawer-content { height: 100% }` + `flex-grow: 1`,
|
||||
and `.p-drawer-left .p-drawer { height: 100% }` inside the `height:100%`
|
||||
mask — so the content fills the panel's full viewport height. With the
|
||||
flex column, SidebarNav (`flex-1 min-h-0 overflow-y-auto`) claims the
|
||||
slack and WorkspaceSwitcher (`flex-shrink-0`) anchors to the true bottom,
|
||||
exactly as the desktop <aside> does via `h-screen`. `min-h-0` here is
|
||||
flex hygiene so the column's children can shrink below content size and
|
||||
the nav scrolls internally rather than pushing the switcher past the
|
||||
fold. NB: this chain is correct under a standard `100%` height; on real
|
||||
mobile browsers a shrinking address bar can make `100%`/`100vh` exceed
|
||||
the *visual* viewport — if the switcher is reported clipped on a device,
|
||||
that dynamic-viewport (`dvh`) interaction is the remaining suspect and
|
||||
needs a real-device check (PrimeVue sets the mask height inline).
|
||||
-->
|
||||
<!-- mobile -->
|
||||
<Drawer
|
||||
@@ -132,7 +149,7 @@ const mobileVisible = computed<boolean>({
|
||||
position="left"
|
||||
class="!w-64"
|
||||
:pt="{
|
||||
content: { class: 'flex flex-col p-0 overflow-hidden h-full' },
|
||||
content: { class: 'flex flex-col p-0 overflow-hidden h-full min-h-0' },
|
||||
header: { class: '!hidden' },
|
||||
}"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user