amantahiliani/box-box
1
0
Fork 0
mirror of https://github.com/AmanTahiliani/box-box.git synced 2026-10-06 18:51:56 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(command-center): level the dashboard columns

Browse Source 
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>
This commit is contained in:
Aman Tahiliani
2026-08-08 12:56:01 -04:00
parent 3397352835
commit fbae59c431
2 changed files with 25 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/PaddockBriefing.tsx
View File

@@ -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">

21
frontend/src/styles/app.css
View File

@@ -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 {