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:
2026-06-03 03:43:21 +02:00
parent b16387b2fb
commit ba3a253640

View File

@@ -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' },
}"
>