feat: responsive layout — tables scroll, grids collapse, headers stack on narrow viewports

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Responsive layout — stats cards, gem grid, and tables adapt to narrow viewports; two-column grids (cache size, cache timeline) collapse to single column at 768px; tables scroll horizontally at 640px; split page headers stack vertically; main padding and header padding reduce on small screens
 - Empty-state improvements — all list views now show a contextual title and an actionable hint; search result empty states include a "Clear search" link; history and stats link to active jobs; processes and recurring tasks explain what to do next
 - Inline notifications — bulk and single-job actions now surface a flash notice; Turbo Stream discard responses prepend the message to the page without a full reload; bulk discard/retry counts are shown ("3 jobs discarded")
 - Dark mode — toggle button in the header switches between light and dark palettes; preference persisted in `localStorage`; respects `prefers-color-scheme` on first visit; driven entirely by CSS custom properties on `[data-theme="dark"]`

README.md

@@ -49,6 +49,7 @@ The dashboard will be available at `/solid_stack` (or whatever path you choose).
 - **Auto-refresh** — dashboard, jobs, processes, and history views poll automatically; pauses when the tab is hidden or a checkbox is checked; intervals configurable via `dashboard_refresh_interval` and `default_refresh_interval`
 - **Turbo Stream** job discard — removes the row inline without a full page reload
 - **Dark mode** — toggle button in the header switches between light and dark palettes; preference persisted in `localStorage`; respects `prefers-color-scheme` on first visit
+- **Responsive layout** — stats cards, tables, and two-column grids adapt to narrow viewports; tables scroll horizontally rather than overflow; split page headers stack on small screens
 - **Empty-state improvements** — all list views show a contextual title and an actionable hint; search empty states include a "Clear search" link; filters-active history view offers "Clear filters"; processes and recurring tasks explain the next step
 - **Inline notifications** — bulk and single-job actions surface a flash notice; Turbo Stream discard responses inject the message inline without a full page reload; bulk actions report the affected count ("3 jobs discarded")
 

ROADMAP.md

@@ -11,7 +11,6 @@ The path to v1.0.0 is staged: first achieve feature parity with `solid_queue_das
 > _Make the interface feel fast and operational, not just functional._
 
 ### Added
-- **Responsive layout** — stats cards and tables adapt to narrow viewports
 - **CSS audit** — review all inline styles, consolidate utility classes, remove duplication, and enforce consistent use of CSS custom properties across all stylesheets
 
 ---

app/assets/stylesheets/solid_stack_web/_02_layout.css

@@ -92,6 +92,13 @@
 }
 
 .sqw-page-header { margin-bottom: 1.25rem; }
+.sqw-page-header--split {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
 .sqw-page-title  { font-size: 20px; font-weight: 600; }
 .sqw-page-title-row { display: flex; align-items: center; gap: 0.5rem; }
 

app/assets/stylesheets/solid_stack_web/_10_responsive.css

@@ -0,0 +1,54 @@
+@media (max-width: 768px) {
+  .sqw-size-grid { grid-template-columns: 1fr; }
+  .sqw-timeline-grid:not(.sqw-timeline-grid--single) { grid-template-columns: 1fr; }
+  .sqw-timeline-chart + .sqw-timeline-chart { border-left: none; border-top: 1px solid var(--border); }
+}
+
+@media (max-width: 640px) {
+  .sqw-main {
+    padding: 1rem;
+  }
+
+  .sqw-page-header--split {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .sqw-table {
+    display: block;
+    overflow-x: auto;
+    border-radius: 0;
+  }
+
+  .sqw-stats-grid {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .sqw-gem-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sqw-truncate {
+    max-width: 160px;
+  }
+
+  .sqw-period-filter {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .sqw-header__inner {
+    padding: 0 1rem;
+    gap: 1rem;
+  }
+
+  .sqw-subnav__inner {
+    padding: 0 1rem;
+    height: auto;
+    min-height: 36px;
+    flex-wrap: wrap;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
+}