From 96fdf0dbd4005db00242c38c8f7c468402e3bd06 Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Mon, 29 Jun 2026 01:31:45 +0200
Subject: [PATCH] Fix board card expansion layout

---
 src/server/board.ts | 36 ++++++++++++++++++++++++++----------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/server/board.ts b/src/server/board.ts
index 652aea1..bc00951 100644
--- a/src/server/board.ts
+++ b/src/server/board.ts
@@ -183,11 +183,12 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
 
     .board {
       display: grid;
-      grid-template-columns: repeat(5, minmax(180px, 1fr));
+      grid-template-columns: repeat(5, minmax(0, 1fr));
       gap: 12px;
       align-items: start;
     }
     .column {
+      min-width: 0;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 8px;
@@ -222,8 +223,11 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
     .column[data-column="done"] .col-label { color: var(--done); }
     .column[data-column="cancelled"] .col-label { color: var(--cancelled); }
 
-    .cards { display: flex; flex-direction: column; gap: 8px; }
+    .cards { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
     .card {
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
       background: var(--raised);
       border: 1px solid var(--border);
       border-left: 3px solid var(--accent);
@@ -320,19 +324,23 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
 
     .timeline {
       display: none;
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
       margin-top: 9px;
       padding-top: 8px;
       border-top: 1px solid var(--border);
     }
     .card.expanded .timeline { display: block; }
     .tl-row {
-      display: flex;
-      align-items: baseline;
+      display: grid;
+      grid-template-columns: auto auto minmax(0, 1fr);
+      align-items: start;
       gap: 6px;
-      flex-wrap: wrap;
       padding: 4px 0;
       border-top: 1px solid rgba(48, 54, 61, .5);
       font-size: 12px;
+      min-width: 0;
     }
     .tl-row:first-child { border-top: 0; }
     .tl-when { color: var(--muted); font: 11px/1.4 var(--mono); white-space: nowrap; min-width: 52px; }
@@ -347,9 +355,9 @@ export function renderBoardHtml(projectName = 'AgentHub Project'): string {
     .tl-kind-handoff { background: rgba(88, 166, 255, .12); color: var(--accent); border-color: rgba(88, 166, 255, .25); }
     .tl-kind-result { background: rgba(34, 197, 94, .12); color: var(--done); border-color: rgba(34, 197, 94, .25); }
     .tl-kind-status { background: rgba(210, 153, 34, .12); color: var(--review); border-color: rgba(210, 153, 34, .25); }
-    .tl-actor { color: var(--muted); font: 11px/1.4 var(--mono); white-space: nowrap; }
-    .tl-summary { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-    .tl-meta { display: flex; gap: 4px; flex-wrap: wrap; }
+    .tl-actor { color: var(--muted); font: 11px/1.4 var(--mono); min-width: 0; overflow-wrap: anywhere; }
+    .tl-summary { grid-column: 1 / -1; min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
+    .tl-meta { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
     .badge.tl-tokens { color: #A371F7; border-color: rgba(163, 113, 247, .25); background: rgba(163, 113, 247, .12); }
     .badge.tl-dur { color: #FFA657; border-color: rgba(255, 166, 87, .25); background: rgba(255, 166, 87, .12); }
     .tl-loading, .tl-empty { color: var(--muted); font-size: 12px; padding: 2px 0; }
@@ -625,12 +633,20 @@ ${columnSkeleton()}
         if (!cardsEl) return;
         var expanded = {};
         cardsEl.querySelectorAll('.card.expanded[data-id]').forEach(function(c) {
-          expanded[c.dataset.id] = true;
+          var timeline = c.querySelector('.timeline');
+          expanded[c.dataset.id] = timeline ? timeline.innerHTML : '';
         });
         cardsEl.innerHTML = list.length ? list.map(taskCard).join('') : '<div class="empty">none</div>';
         Object.keys(expanded).forEach(function(id) {
           var card = cardsEl.querySelector('.card[data-id="' + id + '"]');
-          if (card) card.classList.add('expanded');
+          if (!card) return;
+          card.classList.add('expanded');
+          var timeline = card.querySelector('.timeline');
+          if (timeline && expanded[id]) {
+            timeline.innerHTML = expanded[id];
+          } else {
+            loadTimeline(card, id);
+          }
         });
       });
       updateTimers();