Make the web UI responsive for mobile screens #44

New Issue

connor · 2026-03-21T14:20:33-04:00

connor commented

2026-03-21 14:20:33 -04:00

Description:

The current UI is built with a fixed sidebar layout (shanty-web/frontend/src/components/navbar.rs) and content area. On mobile screens:

The sidebar takes ~200px+ of horizontal space, leaving very little for content
Tables (library, downloads, playlists, album tracks) overflow horizontally with no scrolling
Form inputs in Settings are cramped
The stats grid on the Dashboard uses 4 columns which squish on small screens
The playlist generation page (seed artist picker, generated tracks table) is unusable on narrow screens

What to change

shanty-web/frontend/src/components/navbar.rs: Add a hamburger menu button visible only on small screens (@media (max-width: 768px)). On mobile, the sidebar should be hidden by default and slide in as an overlay when the hamburger is tapped. Add a sidebar_open state and toggle logic.
shanty-web/frontend/style.css: Add responsive breakpoints:
- @media (max-width: 768px) — hide sidebar, show hamburger, make content full-width
- Tables: add overflow-x: auto wrapper so they scroll horizontally
- .stats-grid: change from 4 columns to 2 on mobile
- .form-group inputs: ensure width: 100%
- .autocomplete-dropdown: ensure it doesn't overflow the screen
- .tab-bar: allow horizontal scroll if tabs overflow
shanty-web/frontend/src/pages/dashboard.rs: The stats grid already uses CSS grid — just needs the responsive override in CSS.
shanty-web/frontend/src/pages/settings.rs: Form groups should stack properly — mostly just needs CSS max-width adjustments.
shanty-web/frontend/src/pages/playlists.rs: The seed artist picker and generated tracks table need to work on narrow screens. The autocomplete dropdown should be full-width on mobile.

Acceptance criteria:

Sidebar collapses to a hamburger menu on screens < 768px wide
Tapping hamburger slides sidebar in as overlay, tapping outside or a link closes it
Tables scroll horizontally on mobile (not overflow the page)
Dashboard stats grid shows 2 columns on mobile
Settings page forms are usable on mobile (inputs full width)
Playlist page works on mobile (seed picker, track list)
Tested on common phone widths (375px, 390px, 414px)

**Description:** The current UI is built with a fixed sidebar layout (`shanty-web/frontend/src/components/navbar.rs`) and content area. On mobile screens: - The sidebar takes ~200px+ of horizontal space, leaving very little for content - Tables (library, downloads, playlists, album tracks) overflow horizontally with no scrolling - Form inputs in Settings are cramped - The stats grid on the Dashboard uses 4 columns which squish on small screens - The playlist generation page (seed artist picker, generated tracks table) is unusable on narrow screens ### What to change 1. **`shanty-web/frontend/src/components/navbar.rs`**: Add a hamburger menu button visible only on small screens (`@media (max-width: 768px)`). On mobile, the sidebar should be hidden by default and slide in as an overlay when the hamburger is tapped. Add a `sidebar_open` state and toggle logic. 2. **`shanty-web/frontend/style.css`**: Add responsive breakpoints: - `@media (max-width: 768px)` — hide sidebar, show hamburger, make content full-width - Tables: add `overflow-x: auto` wrapper so they scroll horizontally - `.stats-grid`: change from 4 columns to 2 on mobile - `.form-group` inputs: ensure `width: 100%` - `.autocomplete-dropdown`: ensure it doesn't overflow the screen - `.tab-bar`: allow horizontal scroll if tabs overflow 3. **`shanty-web/frontend/src/pages/dashboard.rs`**: The stats grid already uses CSS grid — just needs the responsive override in CSS. 4. **`shanty-web/frontend/src/pages/settings.rs`**: Form groups should stack properly — mostly just needs CSS `max-width` adjustments. 5. **`shanty-web/frontend/src/pages/playlists.rs`**: The seed artist picker and generated tracks table need to work on narrow screens. The autocomplete dropdown should be full-width on mobile. **Acceptance criteria:** - [ ] Sidebar collapses to a hamburger menu on screens < 768px wide - [ ] Tapping hamburger slides sidebar in as overlay, tapping outside or a link closes it - [ ] Tables scroll horizontally on mobile (not overflow the page) - [ ] Dashboard stats grid shows 2 columns on mobile - [ ] Settings page forms are usable on mobile (inputs full width) - [ ] Playlist page works on mobile (seed picker, track list) - [ ] Tested on common phone widths (375px, 390px, 414px)

connor added the MediumPriority label 2026-03-21 14:20:55 -04:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Shanty/Main#44