fix: group mobile drawer sections (remove bottom-pinned void) #28

Merged
bert.hausmans merged 2 commits from fix/mobile-drawer-spacing into main 2026-06-03 14:15:14 +02:00

MOBILE-SHELL-PARITY follow-up. In the mobile PrimeVue drawer, SidebarNav's flex-1 filled the full-height panel and pushed WorkspaceSwitcher to the very bottom, leaving a large empty void between the menu and the switcher (confirmed via a Storybook screenshot at 375px).

Fix

  • SidebarNav.vue — new grow?: boolean prop (default true via withDefaults). Root <nav> is flex-1 when grow (desktop bottom-anchor), else flex-initial. flex-initial (not flex-none) keeps flex-shrink: 1, so a future long menu shrinks + scrolls internally rather than clipping the switcher out of the overflow-hidden content.
  • AppSidebar.vue — the mobile <Drawer> passes :grow="false" → logo + menu + switcher group at the top. The desktop <aside> passes no grow (defaults true) → unchanged.
  • AppSidebar.spec.ts — SidebarNav stub gains grow; +2 assertions (mobile passes grow=false, desktop does not).
  • .storybook/preview.ts (separate commit) — register v2-dashboard in the story router; the v2 nav RouterLink threw "No match for" and broke every AppSidebar story, blocking visual verification.

Gate

  • crewli-reviewer: REVIEW VERDICT: PASS (no MUST FIX / SHOULD FIX). The substantive CONSIDER (long-menu overflow) was applied via flex-initial.
  • Frontend tests: 84 files / 583 passing (+2 new). Typecheck exit 0; eslint clean.
  • Visually confirmed at 375px — void gone, switcher sits directly below the menu.

🤖 Generated with Claude Code

MOBILE-SHELL-PARITY follow-up. In the mobile PrimeVue drawer, `SidebarNav`'s `flex-1` filled the full-height panel and pushed `WorkspaceSwitcher` to the very bottom, leaving a large empty void between the menu and the switcher (confirmed via a Storybook screenshot at 375px). ## Fix - **`SidebarNav.vue`** — new `grow?: boolean` prop (default `true` via `withDefaults`). Root `<nav>` is `flex-1` when grow (desktop bottom-anchor), else `flex-initial`. `flex-initial` (not `flex-none`) keeps `flex-shrink: 1`, so a future long menu shrinks + scrolls internally rather than clipping the switcher out of the `overflow-hidden` content. - **`AppSidebar.vue`** — the mobile `<Drawer>` passes `:grow="false"` → logo + menu + switcher group at the top. The desktop `<aside>` passes no grow (defaults true) → unchanged. - **`AppSidebar.spec.ts`** — SidebarNav stub gains `grow`; +2 assertions (mobile passes `grow=false`, desktop does not). - **`.storybook/preview.ts`** (separate commit) — register `v2-dashboard` in the story router; the v2 nav RouterLink threw "No match for" and broke every AppSidebar story, blocking visual verification. ## Gate - crewli-reviewer: **REVIEW VERDICT: PASS** (no MUST FIX / SHOULD FIX). The substantive CONSIDER (long-menu overflow) was applied via `flex-initial`. - Frontend tests: **84 files / 583 passing** (+2 new). Typecheck exit 0; eslint clean. - Visually confirmed at 375px — void gone, switcher sits directly below the menu. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
bert.hausmans added 2 commits 2026-06-03 14:14:39 +02:00
The story router only knew the pre-v2 route names, so SidebarNav's RouterLink
to the v2-prefixed 'v2-dashboard' threw 'No match for' and the Storybook error
boundary replaced every AppSidebar story. Add 'v2-dashboard' to the story
router's known names.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
In the mobile drawer the nav's flex-1 filled the full-height panel, pushing
the WorkspaceSwitcher to the very bottom and leaving a large empty void between
the menu and the switcher. Add a 'grow' prop to SidebarNav (default true =
desktop bottom-anchor) and pass grow=false in the mobile drawer so the nav
takes only its natural height — logo, menu and switcher group together at the
top. Desktop sidebar unchanged. +2 Vitest assertions for the contract.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
bert.hausmans merged commit d11d408a31 into main 2026-06-03 14:15:14 +02:00
bert.hausmans deleted branch fix/mobile-drawer-spacing 2026-06-03 14:15:17 +02:00
Sign in to join this conversation.
No Reviewers
No Label
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: bert.hausmans/crewli#28