UI improvements: responsive layout, mobile nav, and accessibility

.gitignore

@@ -4,6 +4,8 @@
 /pkg/
 /tmp/
 /spec/dummy/db/*.sqlite3
+/spec/dummy/db/*.sqlite3-shm
+/spec/dummy/db/*.sqlite3-wal
 /spec/dummy/log/
 /spec/dummy/tmp/
 /coverage/

CHANGELOG.md

@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Hamburger toggle nav for viewports narrower than 576px — three-bar button opens a full-width dropdown with vertically stacked links; no JS file required
+- `sqd-grid-2` utility class for responsive two-column layouts (collapses to one column at ≤768px)
+- `.sqd-sr-only` utility class for visually-hidden text
+- `:focus-visible` focus ring (2px primary blue) for keyboard navigation
+- `aria-expanded` on the mobile nav toggle, kept in sync on open/close
+- `role="status"` on notice flash messages and `role="alert"` on alert flash messages
+- `aria-label="Main"` on the primary navigation landmark
+- `aria-current="page"` on the active navigation link
+- `scope="col"` on all table header cells
+- Visually-hidden "Actions" label on empty action column headers
+
+### Changed
+
+- Navbar title and links constrained to the same max-width as page content so they align horizontally with the dashboard
+- Page headers stack vertically on mobile (≤640px)
+- Stat grid uses a smaller minimum cell width on mobile
+- Cards scroll horizontally on mobile to accommodate wide tables
+- Main content padding reduced on mobile
+
 ## [0.4.0] - 2026-05-18
 
 ### Added

app/assets/stylesheets/solid_queue_web/application.css

@@ -4,6 +4,24 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+.sqd-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+:focus-visible {
+  outline: 2px solid var(--primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
 :root {
   --bg: #f8f9fa;
   --surface: #ffffff;
@@ -30,6 +48,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;
@@ -67,6 +90,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;
@@ -344,8 +389,84 @@ 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-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;
+  }
+}
+
+@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; }

app/views/layouts/solid_queue_web/application.html.erb

@@ -11,24 +11,34 @@
 <body>
 
 <header class="sqd-header">
-  <%= link_to "Solid Queue", root_path, class: "sqd-header__title" %>
-  <nav>
-    <ul class="sqd-nav">
-      <li><%= link_to "Dashboard", root_path, class: current_page?(root_path) ? "active" : "" %></li>
-      <li><%= link_to "Queues", queues_path, class: current_page?(queues_path) ? "active" : "" %></li>
-      <li><%= link_to "Jobs", jobs_path, class: current_page?(jobs_path) ? "active" : "" %></li>
-      <li><%= link_to "Failed", failed_jobs_path, class: current_page?(failed_jobs_path) ? "active" : "" %></li>
-      <li><%= link_to "Processes", processes_path, class: current_page?(processes_path) ? "active" : "" %></li>
-    </ul>
-  </nav>
+  <div class="sqd-header__inner">
+    <%= link_to "Solid Queue", root_path, class: "sqd-header__title" %>
+    <button class="sqd-nav-toggle" aria-label="Toggle navigation" aria-expanded="false"
+            onclick="var open=document.querySelector('.sqd-nav-wrapper').classList.toggle('sqd-nav--open');this.setAttribute('aria-expanded',open)">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+    <div class="sqd-nav-wrapper">
+      <nav aria-label="Main">
+        <ul class="sqd-nav">
+          <li><%= link_to "Dashboard", root_path, class: current_page?(root_path) ? "active" : "", aria: { current: current_page?(root_path) ? "page" : nil } %></li>
+          <li><%= link_to "Queues", queues_path, class: current_page?(queues_path) ? "active" : "", aria: { current: current_page?(queues_path) ? "page" : nil } %></li>
+          <li><%= link_to "Jobs", jobs_path, class: current_page?(jobs_path) ? "active" : "", aria: { current: current_page?(jobs_path) ? "page" : nil } %></li>
+          <li><%= link_to "Failed", failed_jobs_path, class: current_page?(failed_jobs_path) ? "active" : "", aria: { current: current_page?(failed_jobs_path) ? "page" : nil } %></li>
+          <li><%= link_to "Processes", processes_path, class: current_page?(processes_path) ? "active" : "", aria: { current: current_page?(processes_path) ? "page" : nil } %></li>
+        </ul>
+      </nav>
+    </div>
+  </div>
 </header>
 
 <main class="sqd-main">
   <% if notice.present? %>
-    <div class="sqd-flash sqd-flash--notice"><%= notice %></div>
+    <div class="sqd-flash sqd-flash--notice" role="status"><%= notice %></div>
   <% end %>
   <% if alert.present? %>
-    <div class="sqd-flash sqd-flash--alert"><%= alert %></div>
+    <div class="sqd-flash sqd-flash--alert" role="alert"><%= alert %></div>
   <% end %>
 
   <%= yield %>

app/views/solid_queue_web/failed_jobs/index.html.erb

@@ -21,11 +21,11 @@
     <table>
       <thead>
         <tr>
-          <th>Job Class</th>
-          <th>Queue</th>
-          <th>Error</th>
-          <th>Failed At</th>
-          <th></th>
+          <th scope="col">Job Class</th>
+          <th scope="col">Queue</th>
+          <th scope="col">Error</th>
+          <th scope="col">Failed At</th>
+          <th scope="col"><span class="sqd-sr-only">Actions</span></th>
         </tr>
       </thead>
       <tbody>

app/views/solid_queue_web/jobs/index.html.erb

@@ -29,12 +29,12 @@
     <table>
       <thead>
         <tr>
-          <th>Job Class</th>
-          <th>Queue</th>
-          <th>Priority</th>
-          <th>Scheduled At</th>
-          <th>Enqueued At</th>
-          <% if discardable %><th></th><% end %>
+          <th scope="col">Job Class</th>
+          <th scope="col">Queue</th>
+          <th scope="col">Priority</th>
+          <th scope="col">Scheduled At</th>
+          <th scope="col">Enqueued At</th>
+          <% if discardable %><th scope="col"><span class="sqd-sr-only">Actions</span></th><% end %>
         </tr>
       </thead>
       <tbody>

app/views/solid_queue_web/processes/index.html.erb

@@ -7,13 +7,13 @@
     <table>
       <thead>
         <tr>
-          <th>Kind</th>
-          <th>Name</th>
-          <th>PID</th>
-          <th>Host</th>
-          <th>Details</th>
-          <th>Last Heartbeat</th>
-          <th>Status</th>
+          <th scope="col">Kind</th>
+          <th scope="col">Name</th>
+          <th scope="col">PID</th>
+          <th scope="col">Host</th>
+          <th scope="col">Details</th>
+          <th scope="col">Last Heartbeat</th>
+          <th scope="col">Status</th>
         </tr>
       </thead>
       <tbody>

app/views/solid_queue_web/queues/index.html.erb

@@ -7,11 +7,11 @@
     <table>
       <thead>
         <tr>
-          <th>Name</th>
-          <th>Size</th>
-          <th>Latency</th>
-          <th>Status</th>
-          <th></th>
+          <th scope="col">Name</th>
+          <th scope="col">Size</th>
+          <th scope="col">Latency</th>
+          <th scope="col">Status</th>
+          <th scope="col"><span class="sqd-sr-only">Actions</span></th>
         </tr>
       </thead>
       <tbody>