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 = { '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 (
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 {