From 185f25f8d107ce1c17028d3b216756683bd2f953 Mon Sep 17 00:00:00 2001
From: iamtoruk <hello@agentseal.org>
Date: Sun, 12 Jul 2026 15:56:07 -0700
Subject: [PATCH] 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.
---
 app/renderer/sections/Spend.tsx | 4 ++--
 app/renderer/styles/plain.css   | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/renderer/sections/Spend.tsx b/app/renderer/sections/Spend.tsx
index ebf2fc77..40c14c48 100644
--- a/app/renderer/sections/Spend.tsx
+++ b/app/renderer/sections/Spend.tsx
@@ -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} />
       ))}
diff --git a/app/renderer/styles/plain.css b/app/renderer/styles/plain.css
index 67262340..94bbb9fd 100644
--- a/app/renderer/styles/plain.css
+++ b/app/renderer/styles/plain.css
@@ -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); }