Paradaux
Issues

PAR-231

0

Sidebar collapse doesn't collapse — just hides labels (icon-only), stays full width

DoneUnassignedTesksBug

Symptom: clicking the sidebar collapse control didn't collapse the sidebar — it flipped to an icon-only view but the column stayed 256px wide. Verified in Playwright: before click --sidebar-w/aside width = 256px; after click data-sidebar='collapsed' but width still 256px.

Cause: the collapse toggle only set html[data-sidebar='collapsed'] (which hid labels via the icon-rail CSS) but nothing overrode --sidebar-w for the collapsed state — that width rule had regressed out, so the rail had full width with centred icons.

Fix (make collapse actually collapse):

  • Desktop html[data-sidebar='collapsed'] now sets the sidebar to zero width (hidden, no border, content reflows full-width) — not an icon rail. Desktop-only so the mobile off-canvas drawer is unaffected.
  • Moved the collapse control out of the sidebar (where it vanished when hidden) to a top-bar toggle (desktop-only, "Show/Hide sidebar") that flips the state + persists the cookie; SSR reads it so there's no flash. Removed the now-dead CollapseToggle.
  • Removed ImmersiveSidebar (it auto-flipped data-sidebar on every issue open → with full-hide that's a jarring vanish, and the on-navigation magic was part of why the sidebar felt like it "creeps back"). The sidebar is now purely user-controlled and consistent across pages.

Verified in the harness: collapse → width 0, persists across reload (cookie + SSR), top-bar toggle re-opens to 256; issue detail shows the sidebar normally; mobile drawer still slides in. tsc clean.

Comments

tesks · Jun 18, 2026, 12:18 PM

Root cause — regression introduced in 557f82a ("Migrate all components + pages onto the library; delete globals.css", PAR-119, 2026-06-06).

git log -S'width: 68px' shows only two commits touch the rule: c4ec6e8 added it, 557f82a removed it.

Before the migration (557f82a~1, app/globals.css:422):

html[data-sidebar="collapsed"] .sidebar { width: 68px; }

Collapse shrank the sidebar to a 68px icon rail (this had even been deliberately fixed in c4ec6e8 — switched from a --sidebar-w var to a direct .sidebar { width } so an inline resize var couldn't override it).

557f82a deleted globals.css (524 lines) and ported the CSS into per-component SCSS modules, but the collapsed width override was not carried into AppShell.module.scss. The component-scoped label-hiding rules (Sidebar/NavGroup/NavLink/WorkspaceSwitcher) did survive (re-consolidated in the f1ceb0f PAR-120 redesign), so from 557f82a onward the result was: labels hidden, width unchanged → "icon-only, full width" instead of a collapse. Never restored until this fix (9aa257a).

tesks · Jun 18, 2026, 12:41 PM

Correction (467bd57): desired behaviour is the original intent — drag-resizable, and collapse shrinks to a narrow icon rail (icons only), not a full disappearance. The earlier fix (9aa257a) over-corrected to zero width. Restored html[data-sidebar='collapsed'] .sidebar { width: 68px } (the component-level collapsed rules already hide labels / center icons), kept the drag-resize (ResizeHandle, snaps to the rail below ~168px), and relabelled the top-bar toggle Collapse/Expand. Verified in the harness: expanded 256 → collapsed 68px icon rail, drag works.

Activity

  • paradaux changed status to Status → Done
  • tesks commented
  • tesks commented
  • tesks changed status to Status → Pending Release
  • tesks created the issue