feat(app): fixed-height + scrollbar on Spend list panels

By-project and the Activity/Tools/MCP/Subagents breakdown panels cap at 300px
with a slim internal scrollbar, so they stay a consistent compact size instead
of growing unbounded with the data.

typecheck clean; 126/126 tests pass.
This commit is contained in:
iamtoruk 2026-07-12 15:56:07 -07:00
parent 9d25fc3866
commit 185f25f8d1
2 changed files with 6 additions and 2 deletions

View file

@ -119,7 +119,7 @@ function SpendPage({
<Panel title="Daily spend by model" className="spend-chart-panel">
{daily.length ? <StackedBars daily={daily} /> : <EmptyNote>No model spend in this range yet.</EmptyNote>}
</Panel>
<Panel title="By project" right={projects.length ? `top ${projects.length}` : undefined}>
<Panel title="By project" right={projects.length ? `top ${projects.length}` : undefined} className="spend-scroll">
{projects.length ? (
projects.map((project, i) => (
<ListRow
@ -165,7 +165,7 @@ function RowsPanel({
rows: Array<{ key: string; title: string; sub: string; value?: string }>
}) {
return (
<Panel title={title}>
<Panel title={title} className="spend-scroll">
{rows.map((row, i) => (
<ListRow key={row.key} no={String(i + 1).padStart(2, '0')} title={row.title} sub={row.sub} value={row.value} />
))}

View file

@ -295,6 +295,10 @@ body { overflow: hidden; background: var(--bg); color: var(--ink); }
.panel { border-color: var(--line); box-shadow: var(--card-shadow); }
.spend-top-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spend-breakdowns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.spend-scroll > .pbody { max-height: 300px; overflow-y: auto; }
.spend-scroll > .pbody::-webkit-scrollbar { width: 6px; }
.spend-scroll > .pbody::-webkit-scrollbar-thumb { background: var(--mut2); border-radius: 3px; }
.spend-scroll > .pbody::-webkit-scrollbar-track { background: var(--line); }
.error-boundary { display: flex; padding: 20px; }
.error-card { max-width: 760px; padding: 16px 18px; }
.error-title { margin: 0 0 8px; font-size: 14px; font-weight: 620; color: var(--ink); }