Relationships
#2574 Dashboard sidebar is not collapsible on mobile, crushing the main content panel
Opened by maphew · 9/27/2026· Shipped 9/28/2026
Problem
The swamp serve dashboard (packages/dashboard) renders with a fixed 220px-wide sidebar navigation on the left and a main content panel. The App.tsx wraps both in <div className="app">, and styles.css defines:
.app {
display: grid;
grid-template-columns: 220px 1fr;
height: 100vh;
}There are no media queries or responsive breakpoints for the sidebar layout. The only @media (max-width: 900px) rules adjust inner grids (.stats-grid, .panels-grid, .sys-grid), but the root .app grid stays at 220px. On a 375px-wide phone, the sidebar eats ~60% of the screen, leaving ~155px for the main panel — most content goes off-screen or becomes unreadable.
The Sidebar.tsx component has no collapse button, no hamburger toggle, and no mobile-aware behavior whatsoever.
Context
This is the web UI served under swamp serve (route /dashboard/, proxied to the serve API on port 9090). It's a React + Vite SPA in packages/dashboard.
Related issues
- Lab #1283 — "Extensions page: Search bar missing on mobile" (feature, closed)
- Lab #1253 — "Search box collapses to near-zero width on mobile on the Extensions page" (bug, shipped)
Those address specific page-level mobile bugs, but there is no overarching issue for the sidebar itself being non-collapsible.
Suggested approach
- Add a collapse toggle (hamburger/chevron) to the sidebar header.
- On mobile (< 768px or similar), hide the sidebar off-canvas and reveal it via an overlay.
- On desktop, allow collapsing the sidebar to an icon-only rail (optional but consistent with Lab #114 which shipped collapsible left rail for the swamp-club website).
- Add a
@media (max-width: 768px)rule for.appthat switches the sidebar to a fixed/absolute off-canvas drawer.
Key files: packages/dashboard/src/App.tsx, packages/dashboard/src/components/Sidebar.tsx, packages/dashboard/src/styles.css
Shipped
Click a lifecycle step above to view its details.
system commented 9/27/2026, 5:23:51 PM
Classified automatically when this issue was filed.
- Type: Bug
If you feel this classification is incorrect, add a ripple to tell us so.
stack72 commented 9/28/2026, 2:35:26 PM
Thanks @maphew for reporting this! We shipped: Make the swamp serve dashboard sidebar collapsible. On desktop a header toggle collapses the 220px sidebar to a 64px icon-only rail with tooltips and a still-visible approvals badge, remembered in localStorage. Below 768px the sidebar becomes an off-canvas drawer opened from a sticky top-bar menu button and closed by the backdrop, a close button, Escape, or picking a page.. The fix has been merged and a release is on its way. We appreciate your contribution to swamp.
Sign in to post a ripple.