From cc23f0fc9ddbb54b3178a0fa569f113524b8193d Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 19 May 2026 06:46:11 -0400 Subject: [PATCH 1/6] ui: align navbar content with page content width Wrap header title and nav in a constrained inner div so they align horizontally with the main content area (max-width: 1200px, centered). Co-Authored-By: Claude Sonnet 4.6 --- .../solid_queue_web/application.css | 5 +++++ .../solid_queue_web/application.html.erb | 22 ++++++++++--------- 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/app/assets/stylesheets/solid_queue_web/application.css b/app/assets/stylesheets/solid_queue_web/application.css index 72cf657..30cb9b5 100644 --- a/app/assets/stylesheets/solid_queue_web/application.css +++ b/app/assets/stylesheets/solid_queue_web/application.css @@ -30,6 +30,11 @@ body { .sqd-header { background: var(--surface); border-bottom: 1px solid var(--border); +} + +.sqd-header__inner { + max-width: 1200px; + margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; diff --git a/app/views/layouts/solid_queue_web/application.html.erb b/app/views/layouts/solid_queue_web/application.html.erb index 9e3b061..3e6b75e 100644 --- a/app/views/layouts/solid_queue_web/application.html.erb +++ b/app/views/layouts/solid_queue_web/application.html.erb @@ -11,16 +11,18 @@
- <%= link_to "Solid Queue", root_path, class: "sqd-header__title" %> - +
+ <%= link_to "Solid Queue", root_path, class: "sqd-header__title" %> + +
From 15f9a133a4598c6ae08d2f2e2d7e4bcb46314f93 Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 19 May 2026 06:50:53 -0400 Subject: [PATCH 2/6] ui: add mobile-responsive layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Navbar wraps title and links on small screens (≤640px) - Page headers stack vertically on mobile - Tables scroll horizontally inside cards on mobile - Stat grid uses smaller min cell width on mobile - Reduced main padding on mobile - Add sqd-grid-2 utility class (responsive 2-col → 1-col at 768px) Co-Authored-By: Claude Sonnet 4.6 --- .../solid_queue_web/application.css | 52 +++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/app/assets/stylesheets/solid_queue_web/application.css b/app/assets/stylesheets/solid_queue_web/application.css index 30cb9b5..0f18e87 100644 --- a/app/assets/stylesheets/solid_queue_web/application.css +++ b/app/assets/stylesheets/solid_queue_web/application.css @@ -349,8 +349,60 @@ nav.pagy a[aria-disabled="true"] { color: var(--muted); cursor: default; } gap: 1.5rem; } +.sqd-grid-2 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} + @media (max-width: 768px) { .sqd-detail-grid { grid-template-columns: 1fr; } + .sqd-grid-2 { grid-template-columns: 1fr; } +} + +@media (max-width: 640px) { + .sqd-header__inner { + height: auto; + min-height: 56px; + flex-wrap: wrap; + padding: 0.75rem 1rem; + gap: 0.5rem; + } + + .sqd-nav { + flex-wrap: wrap; + } + + .sqd-nav a { + font-size: 12px; + padding: 0.25rem 0.5rem; + } + + .sqd-main { + padding: 1.5rem 1rem; + } + + .sqd-page-header { + flex-direction: column; + align-items: flex-start; + gap: 0.75rem; + } + + .sqd-card { + overflow-x: auto; + } + + .sqd-card__header { + flex-wrap: wrap; + } + + .sqd-stats { + grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); + } + + .sqd-truncate { + max-width: 160px; + } } .sqd-detail-section { padding: 1.25rem; } From 73e48ea5ef1a0e28232b1e65d0b0c345a0e1d4ff Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 19 May 2026 06:54:35 -0400 Subject: [PATCH 3/6] ui: add mobile hamburger nav menu for <576px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Toggle button with three-bar icon appears on small screens. Clicking opens a full-width dropdown nav with vertically stacked links. Uses an inline onclick — no JS file or pipeline required. Co-Authored-By: Claude Sonnet 4.6 --- .../solid_queue_web/application.css | 80 +++++++++++++++---- .../solid_queue_web/application.html.erb | 26 +++--- 2 files changed, 80 insertions(+), 26 deletions(-) diff --git a/app/assets/stylesheets/solid_queue_web/application.css b/app/assets/stylesheets/solid_queue_web/application.css index 0f18e87..87717dd 100644 --- a/app/assets/stylesheets/solid_queue_web/application.css +++ b/app/assets/stylesheets/solid_queue_web/application.css @@ -72,6 +72,28 @@ body { color: var(--text); } +.sqd-nav-toggle { + display: none; + flex-direction: column; + justify-content: center; + gap: 5px; + width: 36px; + height: 36px; + padding: 6px; + margin-left: auto; + background: none; + border: 1px solid var(--border); + border-radius: 5px; + cursor: pointer; +} + +.sqd-nav-toggle span { + display: block; + height: 2px; + background: var(--text); + border-radius: 1px; +} + .sqd-main { max-width: 1200px; margin: 0 auto; @@ -361,23 +383,6 @@ nav.pagy a[aria-disabled="true"] { color: var(--muted); cursor: default; } } @media (max-width: 640px) { - .sqd-header__inner { - height: auto; - min-height: 56px; - flex-wrap: wrap; - padding: 0.75rem 1rem; - gap: 0.5rem; - } - - .sqd-nav { - flex-wrap: wrap; - } - - .sqd-nav a { - font-size: 12px; - padding: 0.25rem 0.5rem; - } - .sqd-main { padding: 1.5rem 1rem; } @@ -405,6 +410,47 @@ nav.pagy a[aria-disabled="true"] { color: var(--muted); cursor: default; } } } +@media (max-width: 576px) { + .sqd-header { + position: relative; + } + + .sqd-header__inner { + padding: 0 1rem; + } + + .sqd-nav-toggle { + display: flex; + } + + .sqd-nav-wrapper { + display: none; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: var(--surface); + border-bottom: 1px solid var(--border); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + z-index: 50; + padding: 0.5rem; + } + + .sqd-nav-wrapper.sqd-nav--open { + display: block; + } + + .sqd-nav { + flex-direction: column; + gap: 0.25rem; + } + + .sqd-nav a { + padding: 0.5rem 0.75rem; + font-size: 14px; + } +} + .sqd-detail-section { padding: 1.25rem; } .sqd-section-title { diff --git a/app/views/layouts/solid_queue_web/application.html.erb b/app/views/layouts/solid_queue_web/application.html.erb index 3e6b75e..299c705 100644 --- a/app/views/layouts/solid_queue_web/application.html.erb +++ b/app/views/layouts/solid_queue_web/application.html.erb @@ -13,15 +13,23 @@
<%= link_to "Solid Queue", root_path, class: "sqd-header__title" %> - + +
+ +
From 6b4e6e27e1da5c2a491a1b54aa6baf0a44a0a4c6 Mon Sep 17 00:00:00 2001 From: Chuck Smith Date: Tue, 19 May 2026 06:58:36 -0400 Subject: [PATCH 4/6] a11y: improve accessibility across layout and views - Add :focus-visible ring (2px primary blue) for keyboard navigation - Add .sqd-sr-only utility class for visually-hidden text - aria-expanded on hamburger toggle, updated by onclick - role="status" on notice flash, role="alert" on alert flash - aria-label="Main" on