From ac3dc2965a9a50346b8877fd46b3c6288f04f087 Mon Sep 17 00:00:00 2001
From: Yashas <yashas.c@getzino.com>
Date: Thu, 10 Sep 2026 13:57:44 +0530
Subject: [PATCH] console: stop the agent dialog capping every table
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AgentCard.css owned a bare `.card { max-height: min(82vh, 720px) }`. The
redesign gave every screen panel the same class, so each lead table was
capped at 720px while its rows kept rendering past the card's own border —
the first ten rows looked enclosed and the rest looked loose on the page.

The dialog moves to its own `agc` namespace, which it half had already
(`prose__dlg`). Verified: no card on All leads or the overview now renders
past its own height, and the dialog is unchanged.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
---
 src/components/AgentCard.css | 47 +++++++++++++++++++-----------------
 src/components/AgentCard.jsx | 16 ++++++------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/components/AgentCard.css b/src/components/AgentCard.css
index 1aefdc5..8eebdf3 100644
--- a/src/components/AgentCard.css
+++ b/src/components/AgentCard.css
@@ -1,6 +1,9 @@
-.card { max-height: min(82vh, 720px); }
+/* The agent dialog. Namespaced `agc`, not `card`: the screens use `.card`
+   for every panel, and a bare `.card { max-height }` here was silently
+   capping the lead tables at 720px while their rows kept rendering. */
+.agc { max-height: min(82vh, 720px); }
 
-.card__head {
+.agc__head {
   display: flex;
   align-items: flex-start;
   gap: 14px;
@@ -8,14 +11,14 @@
   border-bottom: 1px solid var(--zk-line-soft);
 }
 
-.card__disc { width: 38px !important; height: 38px !important; font-size: var(--fs-xs) !important; flex: none; }
+.agc__disc { width: 38px !important; height: 38px !important; font-size: var(--fs-xs) !important; flex: none; }
 
-.card__head > div { flex: 1; min-width: 0; }
+.agc__head > div { flex: 1; min-width: 0; }
 
-.card__head h3 { margin: 0 0 3px; font-size: var(--fs-md); font-weight: 500; color: var(--zk-ink); }
-.card__head p  { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
+.agc__head h3 { margin: 0 0 3px; font-size: var(--fs-md); font-weight: 500; color: var(--zk-ink); }
+.agc__head p  { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
 
-.card__head button {
+.agc__head button {
   flex: none;
   display: grid;
   place-items: center;
@@ -26,15 +29,15 @@
   background: transparent;
   color: var(--zk-muted);
 }
-.card__head button svg { width: 14px; height: 14px; }
-.card__head button:hover { background: var(--zk-tint); color: var(--zk-ink); }
-.card__head button:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
+.agc__head button svg { width: 14px; height: 14px; }
+.agc__head button:hover { background: var(--zk-tint); color: var(--zk-ink); }
+.agc__head button:focus-visible { outline: 2px solid var(--zk-blue); outline-offset: 1px; }
 
-.card__body { overflow-y: auto; padding: 18px 22px 20px; }
+.agc__body { overflow-y: auto; padding: 18px 22px 20px; }
 
-.card__body section + section { margin-top: 20px; }
+.agc__body section + section { margin-top: 20px; }
 
-.card__body h4 {
+.agc__body h4 {
   margin: 0 0 8px;
   font-size: var(--fs-3xs);
   font-weight: 500;
@@ -43,35 +46,35 @@
   color: var(--zk-grey);
 }
 
-.card__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--zk-muted); }
+.agc__body p { margin: 0; font-size: var(--fs-xs); line-height: 1.55; color: var(--zk-muted); }
 
-.card__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
-.card__tools li {
+.agc__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
+.agc__tools li {
   padding: 11px 13px;
   border: 1px solid var(--zk-line);
   border-radius: var(--r-md);
   background: var(--zk-white);
 }
-.card__tools code {
+.agc__tools code {
   display: block;
   margin-bottom: 5px;
   font-size: var(--fs-2xs);
   font-weight: 600;
   color: var(--zk-blue-dark);
 }
-.card__tools span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
+.agc__tools span { font-size: var(--fs-2xs); line-height: 1.5; color: var(--zk-muted); }
 
 /* "No tools" is the most reassuring fact about an agent writing into an
    insurance file. An empty section would read as missing data instead. */
-.card__none {
+.agc__none {
   padding: 11px 13px;
   border-radius: var(--r-md);
   background: var(--zk-tint);
   border: 1px solid var(--zk-line-soft);
 }
 
-.card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
-.card__kb li {
+.agc__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.agc__kb li {
   font-size: var(--fs-2xs);
   padding: 4px 11px;
   border-radius: var(--r-pill);
@@ -79,7 +82,7 @@
   color: var(--zk-blue-dark);
 }
 
-.card__foot {
+.agc__foot {
   margin-top: 20px !important;
   padding-top: 14px;
   border-top: 1px solid var(--zk-line-soft);
diff --git a/src/components/AgentCard.jsx b/src/components/AgentCard.jsx
index 5c41a9f..01c1951 100644
--- a/src/components/AgentCard.jsx
+++ b/src/components/AgentCard.jsx
@@ -42,7 +42,7 @@ export default function AgentCard({ agentKey, onClose }) {
   return createPortal(
     <div className="prose__scrim" onClick={onClose} role="presentation">
       <div
-        className="prose__dlg card"
+        className="prose__dlg agc"
         role="dialog"
         aria-modal="true"
         aria-label={a.full}
@@ -50,8 +50,8 @@ export default function AgentCard({ agentKey, onClose }) {
         ref={ref}
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="card__head">
-          <span className={`who__disc who__disc--${a.tone} card__disc`} aria-hidden="true">{a.initials}</span>
+        <div className="agc__head">
+          <span className={`who__disc who__disc--${a.tone} agc__disc`} aria-hidden="true">{a.initials}</span>
           <div>
             <h3>{a.full}</h3>
             <p>{a.does.charAt(0).toUpperCase() + a.does.slice(1)}.</p>
@@ -64,7 +64,7 @@ export default function AgentCard({ agentKey, onClose }) {
           </button>
         </div>
 
-        <div className="card__body">
+        <div className="agc__body">
           <section>
             <h4>When it runs</h4>
             <p>{a.wakes}</p>
@@ -73,7 +73,7 @@ export default function AgentCard({ agentKey, onClose }) {
           <section>
             <h4>What it can reach</h4>
             {a.tools.length ? (
-              <ul className="card__tools">
+              <ul className="agc__tools">
                 {a.tools.map((t) => (
                   <li key={t.name}>
                     <code>{t.name}</code>
@@ -85,7 +85,7 @@ export default function AgentCard({ agentKey, onClose }) {
               /* Stated positively rather than left blank. "No tools" is the
                  single most reassuring fact about an agent that writes into an
                  insurance file, and an empty section reads as missing data. */
-              <p className="card__none">
+              <p className="agc__none">
                 No tools. It reads the lead and the policy wordings, and writes its answer
                 back into the workflow — nothing else.
               </p>
@@ -94,12 +94,12 @@ export default function AgentCard({ agentKey, onClose }) {
 
           <section>
             <h4>What it reads</h4>
-            <ul className="card__kb">
+            <ul className="agc__kb">
               {a.knowledge.map((k) => <li key={k}>{k}</li>)}
             </ul>
           </section>
 
-          <p className="card__foot">
+          <p className="agc__foot">
             Every step it takes is recorded against the lead, with what it wrote and why.
             It cannot confirm a premium, issue a policy or telephone anybody.
           </p>