From 9c32f5b0696615147860c0f15eb77d993fa81a45 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Wed, 3 Jun 2026 14:46:52 +0200
Subject: [PATCH] fix: strip Aura .p-drawer-content padding in mobile drawer,
 keep switcher bottom-anchored
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Correct the mobile drawer spacing fix. The real spacing was Aura's
.p-drawer-content padding (0 {modal.padding} {modal.padding} {modal.padding},
~20px sides+bottom) insetting the whole logo/menu/switcher block from the
drawer edges — plain p-0 lost to it in stylesheet order, so force it off with
!p-0 (same fix pattern as header !hidden). The WorkspaceSwitcher stays
bottom-anchored exactly like the desktop sidebar: revert the SidebarNav 'grow'
prop and the mobile grow=false (the nav is flex-1 again). Children keep their
own intrinsic padding; the drawer content is now edge-to-edge like desktop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/components-v2/layout/AppSidebar.vue   | 16 +++++++---
 .../src/components-v2/layout/SidebarNav.vue   | 21 ++----------
 .../layout/__tests__/AppSidebar.spec.ts       | 32 ++++++-------------
 3 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/apps/app/src/components-v2/layout/AppSidebar.vue b/apps/app/src/components-v2/layout/AppSidebar.vue
index b31288c7..294567e6 100644
--- a/apps/app/src/components-v2/layout/AppSidebar.vue
+++ b/apps/app/src/components-v2/layout/AppSidebar.vue
@@ -151,6 +151,15 @@ const mobileVisible = computed<boolean>({
     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).
+
+    Wrapper padding: Aura themes `.p-drawer-content` with
+    `padding: 0 {modal.padding} {modal.padding} {modal.padding}` (~20px on the
+    sides + bottom), which insets the whole logo/menu/switcher block from the
+    drawer edges. The desktop <aside> has no such padding, so we strip it for
+    edge-to-edge parity with `!p-0` — the important variant is required because
+    plain `p-0` lost to Aura's `.p-drawer-content` rule in stylesheet order
+    (same failure mode as the header `!hidden` above). The children own their
+    own internal spacing exactly as on desktop.
   -->
   <!-- mobile -->
   <Drawer
@@ -160,15 +169,12 @@ const mobileVisible = computed<boolean>({
     class="!w-64"
     :show-close-icon="false"
     :pt="{
-      content: { class: 'flex flex-col p-0 overflow-hidden h-full min-h-0' },
+      content: { class: 'flex flex-col !p-0 overflow-hidden h-full min-h-0' },
       header: { class: '!hidden' },
     }"
   >
     <SidebarHeader />
-    <SidebarNav
-      :collapsed="false"
-      :grow="false"
-    />
+    <SidebarNav :collapsed="false" />
     <WorkspaceSwitcher :collapsed="false" />
   </Drawer>
 </template>
diff --git a/apps/app/src/components-v2/layout/SidebarNav.vue b/apps/app/src/components-v2/layout/SidebarNav.vue
index 05639afd..8fb82563 100644
--- a/apps/app/src/components-v2/layout/SidebarNav.vue
+++ b/apps/app/src/components-v2/layout/SidebarNav.vue
@@ -22,21 +22,9 @@ import type { RouteLocationRaw } from 'unplugin-vue-router'
 import Icon from '@/components/Icon.vue'
 import { APP_NAVIGATION, type NavItem } from '@/config/navigation'
 
-withDefaults(defineProps<{
+defineProps<{
   collapsed: boolean
-  /**
-   * When true (default), the nav fills available vertical space (`flex-1`)
-   * so a bottom-anchored sibling (WorkspaceSwitcher) pins to the bottom — the
-   * desktop sidebar behaviour. Set false in the mobile drawer (`flex-initial`)
-   * so the nav takes its natural height — logo + menu + switcher group together
-   * at the top instead of leaving a void above a bottom-pinned switcher
-   * (MOBILE-SHELL-PARITY follow-up). `flex-initial` (not `flex-none`) keeps
-   * `flex-shrink: 1`, so if the menu ever grows past the panel height the nav
-   * shrinks and scrolls internally (`min-h-0 overflow-y-auto`) rather than
-   * pushing the switcher out of the `overflow-hidden` drawer content.
-   */
-  grow?: boolean
-}>(), { grow: true })
+}>()
 
 const route = useRoute()
 
@@ -64,10 +52,7 @@ function itemTo(item: NavItem): RouteLocationRaw {
 </script>
 
 <template>
-  <nav
-    class="min-h-0 overflow-y-auto py-3.5 px-2.5 [scrollbar-width:thin]"
-    :class="grow ? 'flex-1' : 'flex-initial'"
-  >
+  <nav class="flex-1 min-h-0 overflow-y-auto py-3.5 px-2.5 [scrollbar-width:thin]">
     <template
       v-for="topItem in APP_NAVIGATION"
       :key="topItem.key"
diff --git a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts
index 980e55a2..1a68849d 100644
--- a/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts
+++ b/apps/app/src/components-v2/layout/__tests__/AppSidebar.spec.ts
@@ -66,8 +66,8 @@ const globalStubs = {
   SidebarHeader: { name: 'SidebarHeader', template: '<div class="sidebar-header-stub" />' },
   SidebarNav: {
     name: 'SidebarNav',
-    props: ['collapsed', 'grow'],
-    template: '<div class="sidebar-nav-stub" :data-collapsed="collapsed" :data-grow="grow" />',
+    props: ['collapsed'],
+    template: '<div class="sidebar-nav-stub" :data-collapsed="collapsed" />',
   },
   WorkspaceSwitcher: {
     name: 'WorkspaceSwitcher',
@@ -203,33 +203,21 @@ describe('AppSidebar', () => {
     expect(drawer.find('.workspace-switcher-stub').exists()).toBe(true)
   })
 
-  it('mobile: SidebarNav is told NOT to grow (grow=false) so logo/menu/switcher group at the top', async () => {
+  it('mobile: drawer content strips the Aura wrapper padding (!p-0) for edge-to-edge parity', async () => {
     mockIsMobileRef.value = true
 
     const wrapper = mountSidebar()
 
     await wrapper.vm.$nextTick()
 
-    // grow=false → nav takes natural height, no flex-1 fill → no void above a
-    // bottom-pinned WorkspaceSwitcher (they group together at the top instead).
-    const navInDrawer = wrapper.find('.drawer-stub').find('.sidebar-nav-stub')
+    const pt = wrapper.findComponent(DrawerStub).props('pt') as {
+      content: { class: string }
+    }
 
-    expect(navInDrawer.attributes('data-grow')).toBe('false')
-  })
-
-  it('desktop: SidebarNav is allowed to grow (WorkspaceSwitcher stays bottom-anchored)', async () => {
-    mockIsMobileRef.value = false
-
-    const wrapper = mountSidebar()
-
-    await wrapper.vm.$nextTick()
-
-    // The desktop <aside> passes no grow prop → defaults to true (flex-1),
-    // keeping the switcher pinned at the bottom. The stub does not apply the
-    // component default, so we assert grow is NOT explicitly false here.
-    const navInAside = wrapper.find('aside').find('.sidebar-nav-stub')
-
-    expect(navInAside.attributes('data-grow')).not.toBe('false')
+    // Aura sets .p-drawer-content padding; plain p-0 loses to it in stylesheet
+    // order, so the important variant is required to remove the inset around
+    // the logo/menu/switcher block.
+    expect(pt.content.class).toContain('!p-0')
   })
 
   // -------------------------------------------------------------------------
-- 
2.39.5