fix(board): card overlap via grid-auto-rows max-content + review cards get ring design

src/server/board/columns.ts

@@ -240,8 +240,12 @@ export function columnsJs(opts: ColumnsJsOpts): string {
             '</div>' +
           '</div>'
         : '';
-      var ring = live
+      // Progress ring on in-progress (work time) AND review cards (wait time) —
-        ? '<span class="b2-ring" data-ring data-claimed="' + esc(t.claimedAt || t.updatedAt || t.createdAt || '') + '">' +
+      // 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"/>' +

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); }
 

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');