From ba3a25364028f36850e43b511ded6279c7975199 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 3 Jun 2026 03:43:21 +0200
Subject: [PATCH] fix: guard mobile drawer full-height column for
 WorkspaceSwitcher anchor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components-v2/layout/AppSidebar.vue   | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components-v2/layout/AppSidebar.vue b/apps/app/src/components-v2/layout/AppSidebar.vue
index f7680f35..70e328d6 100644
--- a/apps/app/src/components-v2/layout/AppSidebar.vue
+++ b/apps/app/src/components-v2/layout/AppSidebar.vue
@@ -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' },
     }"
   >