Skip to main content
← Back to list
01Issue
FeatureShippedSwamp CLIPublic
Assigneesstack72

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.

  • 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

  1. Add a collapse toggle (hamburger/chevron) to the sidebar header.
  2. On mobile (< 768px or similar), hide the sidebar off-canvas and reveal it via an overlay.
  3. 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).
  4. Add a @media (max-width: 768px) rule for .app that 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

02Bog Flow
✓OPEN✓TRIAGED✓IN PROGRESS✓SHIPPEDTRIAGE+ 8 MOREREVIEW+ 13 MOREPR_MERGED+ 2 MORESESSION_SUMMARIZED

Shipped

9/28/2026, 2:35:18 PM

Click a lifecycle step above to view its details.

03Sludge Pulse
stack72 assigned stack729/28/2026, 1:44:31 PM
Editable. Press Enter to edit.

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.