From fbae59c4312df5644205f2e5989ee1cc3cad2355 Mon Sep 17 00:00:00 2001
From: AmanTahiliani <amantahiliani7437@gmail.com>
Date: Sat, 8 Aug 2026 12:56:01 -0400
Subject: [PATCH] feat(command-center): level the dashboard columns

Stretch the two dashboard columns to a shared row height so whichever side
is taller sets the baseline and the other fills down to it, instead of the
main panel stopping short of the sidebar.

Raise the paddock briefing preview to ten headlines and let the strip take
the column's leftover height, so the extra space is filled with news rather
than empty panel; anything past the fold scrolls in place.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/components/PaddockBriefing.tsx |  6 +++++-
 frontend/src/styles/app.css                 | 21 ++++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/PaddockBriefing.tsx b/frontend/src/components/PaddockBriefing.tsx
index 3f44aeb..d47588d 100644
--- a/frontend/src/components/PaddockBriefing.tsx
+++ b/frontend/src/components/PaddockBriefing.tsx
@@ -29,6 +29,8 @@ const SOURCE_DISPLAY: Record<string, string> = {
   'f1-youtube': 'F1 YouTube',
 }
 
+const PREVIEW_LIMIT = 10
+
 export function PaddockBriefing() {
   const now = useMemo(() => new Date(), [])
 
@@ -76,7 +78,9 @@ export function PaddockBriefing() {
   const sinceLabel = sinceLastLabel(meetings, now)
 
   const unreadCount = news?.filter((i) => !i.read_at).length ?? 0
-  const preview = sinceItems.length > 0 ? sinceItems.slice(0, 5) : (tagged.slice(0, 5))
+  // The strip flexes to the bottom of the dashboard column, so offer more than
+  // fits and let the overflow scroll rather than leaving the column short.
+  const preview = sinceItems.length > 0 ? sinceItems.slice(0, PREVIEW_LIMIT) : tagged.slice(0, PREVIEW_LIMIT)
 
   return (
     <section className="cc-briefing" data-testid="paddock-briefing">
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 52da8b8..c197efd 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -1865,13 +1865,22 @@ a { color: inherit; text-decoration: none; }
     display: grid;
     grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
     gap: var(--s6);
-    align-items: start;
+    /* Stretch, not start: whichever column is taller sets the row height and the
+       other fills down to it, so the two never end on different baselines. */
+    align-items: stretch;
+  }
+
+  .cc-dashboard-panel {
+    flex: 1;
+    min-height: 0;
   }
 }
 
 .cc-dashboard-main {
   position: relative;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .cc-dashboard-panel {
@@ -3360,6 +3369,8 @@ a { color: inherit; text-decoration: none; }
   display: flex;
   flex-direction: column;
   gap: var(--s3);
+  flex: 1;
+  min-height: 0;
 }
 
 .cc-briefing .sec-header {
@@ -3402,6 +3413,14 @@ a { color: inherit; text-decoration: none; }
   display: flex;
   flex-direction: column;
   gap: 1px;
+  /* Takes the column's leftover height; extra headlines scroll instead of
+     pushing the panel past the sidebar. */
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
 }
 
 .cc-brief-item {