feat: unify detail page layout and CSS across all three sections

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Unify detail page layout across all three sections — cache entry detail now uses the same card-based layout as job and failed job detail pages; consolidate `sqw-detail`/`sqw-value-pre` CSS into the shared `sqw-dl`/`sqw-code-block` classes; inline margin style on the failed-job arguments card replaced with a CSS sibling-selector rule
+
 ## [0.9.0] - 2026-05-27
 
 ### Changed

ROADMAP.md

@@ -11,7 +11,6 @@ The path to v1.0.0 is staged: first achieve feature parity with `solid_queue_das
 > _Declare a stable public API and commit to semantic versioning guarantees._
 
 ### Added
-- Final UI polish pass — visual consistency across all three sections
 - Complete README with configuration reference, screenshot gallery, and security guidance
 - Public API stability policy documented — breaking changes require a major version bump
 - Deprecation warnings for any config keys renamed between 0.x and 1.0

app/assets/stylesheets/solid_stack_web/_09_detail.css

@@ -70,20 +70,9 @@
   overflow-y: auto;
 }
 
-.sqw-detail {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 0.5rem 1.5rem;
-  font-size: 13px;
-  margin-bottom: 1.5rem;
-}
-.sqw-detail__row {
-  display: contents;
-}
-.sqw-detail__row dt { color: var(--muted); white-space: nowrap; align-self: start; padding-top: 0.15rem; }
-.sqw-detail__row dd { word-break: break-all; }
-
-.sqw-value-preview { margin-top: 1rem; }
+.sqw-detail-card--mt,
+.sqw-detail-card + .sqw-detail-card,
+.sqw-detail-grid + .sqw-detail-card { margin-top: 1.5rem; }
 
 .sqw-value-preview__header {
   display: flex;
@@ -93,20 +82,6 @@
 }
 .sqw-value-preview__header .sqw-section-title { margin-bottom: 0; }
 
-.sqw-value-pre {
-  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
-  font-size: 12px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 0.75rem;
-  overflow-x: auto;
-  white-space: pre-wrap;
-  word-break: break-word;
-  max-height: 500px;
-  overflow-y: auto;
-}
-
 .sqw-value-truncated { font-size: 12px; margin-top: 0.5rem; }
 
 .sqw-link { color: var(--primary); text-decoration: none; }

app/views/solid_stack_web/cache_entries/show.html.erb

@@ -10,33 +10,30 @@
   </div>
 </div>
 
-<dl class="sqw-detail">
-  <div class="sqw-detail__row">
+<div class="sqw-detail-card sqw-detail-section">
+  <h2 class="sqw-section-title">Details</h2>
+  <dl class="sqw-dl">
     <dt>Key</dt>
     <dd class="sqw-monospace"><%= @entry.key %></dd>
-  </div>
-  <div class="sqw-detail__row">
     <dt>Size</dt>
     <dd><%= number_to_human_size(@entry.byte_size) %></dd>
-  </div>
-  <div class="sqw-detail__row">
     <dt>Created</dt>
     <dd class="sqw-muted"><%= local_time(@entry.created_at, format: :long) %></dd>
-  </div>
-</dl>
+  </dl>
+</div>
 
-<section class="sqw-value-preview">
+<div class="sqw-detail-card sqw-detail-section">
+  <% formatted = SolidStackWeb.allow_value_preview ? format_cache_value(@entry.value) : nil %>
   <div class="sqw-value-preview__header">
     <h2 class="sqw-section-title">Value</h2>
-    <% if SolidStackWeb.allow_value_preview %>
-      <% formatted = format_cache_value(@entry.value) %>
+    <% if formatted %>
       <span class="sqw-badge sqw-badge--queue"><%= formatted[:label] %></span>
     <% end %>
   </div>
-  <% if SolidStackWeb.allow_value_preview %>
+  <% if formatted %>
     <% content = formatted[:content] %>
     <% truncated = content.length > 4096 %>
-    <pre class="sqw-value-pre"><%= truncated ? content[0, 4096] : content %></pre>
+    <pre class="sqw-code-block"><%= truncated ? content[0, 4096] : content %></pre>
     <% if truncated %>
       <p class="sqw-muted sqw-value-truncated">Showing first 4 KB of <%= number_to_human_size(@entry.byte_size) %> total.</p>
     <% end %>
@@ -45,4 +42,4 @@
       <p>Value preview is disabled. Set <code>config.allow_value_preview = true</code> in your initializer to enable.</p>
     </div>
   <% end %>
-</section>
+</div>

app/views/solid_stack_web/failed_jobs/show.html.erb

@@ -45,7 +45,7 @@
   </div>
 </div>
 
-<div class="sqw-detail-card sqw-detail-section" style="margin-top: 1.5rem;">
+<div class="sqw-detail-card sqw-detail-section sqw-detail-card--mt">
   <h2 class="sqw-section-title">Arguments</h2>
   <%= form_with url: failed_job_arguments_path(@execution), method: :patch do |f| %>
     <%= f.text_area :arguments, value: @arguments, rows: 12,