From 2900f07f6f8ece1726dcb82822da817c3bbdc6dd Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 26 May 2026 16:49:34 -0400 Subject: [PATCH] =?UTF-8?q?feat:=20responsive=20layout=20=E2=80=94=20table?= =?UTF-8?q?s=20scroll,=20grids=20collapse,=20headers=20stack=20on=20narrow?= =?UTF-8?q?=20viewports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Sonnet 4.6 --- CHANGELOG.md | 1 + README.md | 1 + ROADMAP.md | 1 - .../solid_stack_web/_02_layout.css | 7 +++ .../solid_stack_web/_10_responsive.css | 54 +++++++++++++++++++ 5 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 app/assets/stylesheets/solid_stack_web/_10_responsive.css diff --git a/CHANGELOG.md b/CHANGELOG.md index 3d66a99..88ea4c1 100644 --- a/CHANGELOG.md +++ b/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"]` diff --git a/README.md b/README.md index 8aa40af..8be7c21 100644 --- a/README.md +++ b/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") diff --git a/ROADMAP.md b/ROADMAP.md index ae7bbc7..4d0e44a 100644 --- a/ROADMAP.md +++ b/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 --- diff --git a/app/assets/stylesheets/solid_stack_web/_02_layout.css b/app/assets/stylesheets/solid_stack_web/_02_layout.css index d789bb9..77319d1 100644 --- a/app/assets/stylesheets/solid_stack_web/_02_layout.css +++ b/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; } diff --git a/app/assets/stylesheets/solid_stack_web/_10_responsive.css b/app/assets/stylesheets/solid_stack_web/_10_responsive.css new file mode 100644 index 0000000..da22a44 --- /dev/null +++ b/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; + } +} \ No newline at end of file