From 5dd5806640b50195c69f46909744e1abe20f59f5 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Wed, 22 Jul 2026 17:11:19 +0200
Subject: [PATCH] fix(board): card overlap via grid-auto-rows max-content +
 review cards get ring design

---
 src/server/board/columns.ts | 8 ++++++--
 src/server/board/styles.ts  | 2 ++
 tests/boardV2.test.ts       | 6 ++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/server/board/columns.ts b/src/server/board/columns.ts
index 6c3755d..4da2cf7 100644
--- a/src/server/board/columns.ts
+++ b/src/server/board/columns.ts
@@ -240,8 +240,12 @@ export function columnsJs(opts: ColumnsJsOpts): string {
             '</div>' +
           '</div>'
         : '';
-      var ring = live
-        ? '<span class="b2-ring" data-ring data-claimed="' + esc(t.claimedAt || t.updatedAt || t.createdAt || '') + '">' +
+      // Progress ring on in-progress (work time) AND review cards (wait time) —
+      // same design, review variant in amber. Filled = elapsed vs median estimate.
+      var ringStatus = live ? 'work' : status === 'review' ? 'review' : '';
+      var ringSince = live ? (t.claimedAt || t.updatedAt || t.createdAt || '') : (t.updatedAt || t.createdAt || '');
+      var ring = ringStatus
+        ? '<span class="b2-ring' + (ringStatus === 'review' ? ' b2-ring-review' : '') + '" data-ring data-claimed="' + esc(ringSince) + '">' +
             '<svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">' +
               '<circle class="b2-ring-track" cx="10" cy="10" r="8" stroke-width="3"/>' +
               '<circle class="b2-ring-fill" cx="10" cy="10" r="8" stroke-width="3" stroke-dasharray="50.3" stroke-dashoffset="50.3"/>' +
diff --git a/src/server/board/styles.ts b/src/server/board/styles.ts
index 8d500f8..66da531 100644
--- a/src/server/board/styles.ts
+++ b/src/server/board/styles.ts
@@ -190,6 +190,7 @@ export function boardV2Css(): string {
     .column[data-column="cancelled"] .col-dot { background: var(--cancelled); }
     .cards {
       display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      grid-auto-rows: max-content; /* auto-Tracks fielen auf min-height zurück → Overlap */
       gap: 10px; min-width: 0; min-height: 0; overflow-y: auto;
       overscroll-behavior: contain; padding: 2px 4px 2px 2px;
       align-items: start; scrollbar-gutter: stable;
@@ -249,6 +250,7 @@ export function boardV2Css(): string {
     .b2-ring-fill { fill: none; stroke: var(--in_progress); stroke-linecap: round;
       transition: stroke-dashoffset 900ms cubic-bezier(.2,.7,.2,1), stroke 300ms ease; }
     .b2-ring.b2-over .b2-ring-fill { stroke: var(--b2-amber); }
+    .b2-ring.b2-ring-review .b2-ring-fill { stroke: var(--review); }
     .b2-ring-time { font: 11px/1 var(--mono); color: var(--b2-muted); }
     .b2-ring.b2-over .b2-ring-time { color: var(--b2-amber); }
 
diff --git a/tests/boardV2.test.ts b/tests/boardV2.test.ts
index de419cb..04b90d6 100644
--- a/tests/boardV2.test.ts
+++ b/tests/boardV2.test.ts
@@ -23,6 +23,12 @@ describe('renderBoardHtml (v2)', () => {
     expect(html).toContain('b2-ring');
     expect(html).toContain('b2-working');
   });
+  it('gives review cards the same ring design (amber variant)', () => {
+    expect(html).toContain('b2-ring-review');
+  });
+  it('sizes card grid rows to content (overlap regression)', () => {
+    expect(html).toContain('grid-auto-rows: max-content');
+  });
   it('does not ship the old v1 metric cards or lottie kpi icons', () => {
     expect(html).not.toContain('metric-card');
     expect(html).not.toContain('lottie');