From 2592604067da9ab7666c35acffde09117f1f7e7a Mon Sep 17 00:00:00 2001
From: Michael <michael.dombaugh@gmail.com>
Date: Mon, 8 Jun 2026 16:14:04 +0000
Subject: [PATCH] feat(layout-review): address Home page review findings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Findings card no longer truncates silently: panel #1 gains a
  .dt-finding-more overflow control ("Show all 8 findings · 5 more").
- Replace the dead "Files analyzed: 3" stat (restated the section meta
  + visible rows) with "Rows scanned" — info not already on screen.
- Collapsed findings panels use a real .is-collapsed state variant
  instead of inline margin-bottom:-16px hacks, so states can't drift.
- Action bar buttons are content-sized; drop the 340px island that
  jarred against the full-width divider/stats below it.

Branding kept as deliberate landing-style treatment on Home (per
review decision); interior tool pages remain title-only.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 layout-review/app.css   | 19 +++++++++++++++++++
 layout-review/home.html | 22 +++++++++++++---------
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/layout-review/app.css b/layout-review/app.css
index b363eaa..11b3a04 100644
--- a/layout-review/app.css
+++ b/layout-review/app.css
@@ -445,6 +445,25 @@ table.dt-table td.idx { color: var(--ink-tertiary); background: var(--surface-ho
 .dt-finding-title strong { font-weight: 500; }
 .dt-finding-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); line-height: 1.4; margin: 0; font-feature-settings: "ss02"; }
 
+/* Overflow control — sits at the foot of a findings card when rows are hidden.
+   Bleeds to the card edges (cancels the .dt-card 16px padding) like .dt-file-add. */
+.dt-finding-more {
+  display: flex; align-items: center; justify-content: center; gap: 6px;
+  width: calc(100% + 32px); margin: 4px -16px -16px;
+  padding: 11px 16px; background: var(--surface-hover);
+  border: none; border-top: 1px solid var(--border);
+  border-radius: 0 0 var(--r-lg) var(--r-lg); cursor: pointer;
+  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--ink-secondary);
+}
+.dt-finding-more:hover { background: var(--accent-fill); color: var(--accent); }
+.dt-finding-more .dt-mi { font-family: "Material Symbols Outlined"; font-size: 18px; }
+
+/* Collapsed findings panel — the group head fills the whole card (head only,
+   no body). Proper state variant so the two states don't drift; replaces the
+   per-instance inline margin-bottom:-16px hack. */
+.dt-card.is-collapsed { padding: 0; }
+.dt-finding-group-head.is-collapsed { margin: 0; border-bottom: none; border-radius: var(--r-lg); }
+
 /* Match-group review card (dedup) */
 .dt-match-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(28,25,23,0.03); margin: 12px 0; overflow: hidden; }
 .dt-match-head { background: var(--surface-hover); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 12px; }
diff --git a/layout-review/home.html b/layout-review/home.html
index 5c4d3ca..38557da 100644
--- a/layout-review/home.html
+++ b/layout-review/home.html
@@ -69,9 +69,9 @@
       </div>
 
       <!-- Action bar -->
-      <div class="dt-btn-row" style="margin-top:16px;max-width:340px">
-        <button class="dt-btn dt-btn-primary">Run analysis</button>
-        <button class="dt-btn">Clear results</button>
+      <div class="dt-btn-row" style="margin-top:16px">
+        <button class="dt-btn dt-btn-primary" style="flex:0 0 auto">Run analysis</button>
+        <button class="dt-btn" style="flex:0 0 auto">Clear results</button>
       </div>
 
       <hr class="dt-divider">
@@ -79,8 +79,8 @@
       <!-- Stats overview -->
       <div class="dt-stats">
         <div class="dt-stat">
-          <div class="dt-stat-label">Files analyzed</div>
-          <div class="dt-stat-value">3</div>
+          <div class="dt-stat-label">Rows scanned</div>
+          <div class="dt-stat-value">48,210 <span class="dt-stat-unit">rows</span></div>
         </div>
         <div class="dt-stat">
           <div class="dt-stat-label">Total findings</div>
@@ -129,11 +129,15 @@
             <p class="dt-finding-meta">3 formats detected · Standardize Formats →</p>
           </div>
         </div>
+
+        <button class="dt-finding-more">
+          <span class="dt-mi">expand_more</span> Show all 8 findings · 5 more
+        </button>
       </div>
 
       <!-- Per-file findings panel #2 (collapsed) -->
-      <div class="dt-card" style="padding-bottom:16px">
-        <div class="dt-finding-group-head" style="margin-bottom:-16px;border-radius:var(--r-lg);border-bottom:none">
+      <div class="dt-card is-collapsed">
+        <div class="dt-finding-group-head is-collapsed">
           <span class="dt-finding-group-chevron">chevron_right</span>
           <span class="dt-severity-dot warn"></span>
           <span class="dt-group-filename">q3_transactions.xlsx</span>
@@ -145,8 +149,8 @@
       </div>
 
       <!-- Per-file findings panel #3 (clean) -->
-      <div class="dt-card" style="padding-bottom:16px">
-        <div class="dt-finding-group-head" style="margin-bottom:-16px;border-radius:var(--r-lg);border-bottom:none">
+      <div class="dt-card is-collapsed">
+        <div class="dt-finding-group-head is-collapsed">
           <span class="dt-severity-dot success"></span>
           <span class="dt-group-filename">vendor_list.csv</span>
           <div class="dt-group-counts">