gitea_admin/zurich_kotak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

console: stop the agent dialog capping every table

Browse Source 
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>
This commit is contained in:
Yashas 2026-09-10 13:57:44 +05:30
parent a310b0a8b9
commit ac3dc2965a
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/AgentCard.css
View File

@ -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; display: flex;
align-items: flex-start; align-items: flex-start;
gap: 14px; gap: 14px;
@ -8,14 +11,14 @@
border-bottom: 1px solid var(--zk-line-soft); 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); } .agc__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 p { margin: 0; font-size: var(--fs-2xs); line-height: 1.45; color: var(--zk-muted); }
.card__head button { .agc__head button {
flex: none; flex: none;
display: grid; display: grid;
place-items: center; place-items: center;
@ -26,15 +29,15 @@
background: transparent; background: transparent;
color: var(--zk-muted); color: var(--zk-muted);
} }
.card__head button svg { width: 14px; height: 14px; } .agc__head button svg { width: 14px; height: 14px; }
.card__head button:hover { background: var(--zk-tint); color: var(--zk-ink); } .agc__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: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; margin: 0 0 8px;
font-size: var(--fs-3xs); font-size: var(--fs-3xs);
font-weight: 500; font-weight: 500;
@ -43,35 +46,35 @@
color: var(--zk-grey); 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; } .agc__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.card__tools li { .agc__tools li {
padding: 11px 13px; padding: 11px 13px;
border: 1px solid var(--zk-line); border: 1px solid var(--zk-line);
border-radius: var(--r-md); border-radius: var(--r-md);
background: var(--zk-white); background: var(--zk-white);
} }
.card__tools code { .agc__tools code {
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
font-size: var(--fs-2xs); font-size: var(--fs-2xs);
font-weight: 600; font-weight: 600;
color: var(--zk-blue-dark); 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 /* "No tools" is the most reassuring fact about an agent writing into an
insurance file. An empty section would read as missing data instead. */ insurance file. An empty section would read as missing data instead. */
.card__none { .agc__none {
padding: 11px 13px; padding: 11px 13px;
border-radius: var(--r-md); border-radius: var(--r-md);
background: var(--zk-tint); background: var(--zk-tint);
border: 1px solid var(--zk-line-soft); border: 1px solid var(--zk-line-soft);
} }
.card__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .agc__kb { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.card__kb li { .agc__kb li {
font-size: var(--fs-2xs); font-size: var(--fs-2xs);
padding: 4px 11px; padding: 4px 11px;
border-radius: var(--r-pill); border-radius: var(--r-pill);
@ -79,7 +82,7 @@
color: var(--zk-blue-dark); color: var(--zk-blue-dark);
} }
.card__foot { .agc__foot {
margin-top: 20px !important; margin-top: 20px !important;
padding-top: 14px; padding-top: 14px;
border-top: 1px solid var(--zk-line-soft); border-top: 1px solid var(--zk-line-soft);

16
src/components/AgentCard.jsx
View File

@ -42,7 +42,7 @@ export default function AgentCard({ agentKey, onClose }) {
return createPortal( return createPortal(
<div className="prose__scrim" onClick={onClose} role="presentation"> <div className="prose__scrim" onClick={onClose} role="presentation">
<div <div
className="prose__dlg card" className="prose__dlg agc"
role="dialog" role="dialog"
aria-modal="true" aria-modal="true"
aria-label={a.full} aria-label={a.full}
@ -50,8 +50,8 @@ export default function AgentCard({ agentKey, onClose }) {
ref={ref} ref={ref}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="card__head"> <div className="agc__head">
<span className={`who__disc who__disc--${a.tone} card__disc`} aria-hidden="true">{a.initials}</span> <span className={`who__disc who__disc--${a.tone} agc__disc`} aria-hidden="true">{a.initials}</span>
<div> <div>
<h3>{a.full}</h3> <h3>{a.full}</h3>
<p>{a.does.charAt(0).toUpperCase() + a.does.slice(1)}.</p> <p>{a.does.charAt(0).toUpperCase() + a.does.slice(1)}.</p>
@ -64,7 +64,7 @@ export default function AgentCard({ agentKey, onClose }) {
</button> </button>
</div> </div>
<div className="card__body"> <div className="agc__body">
<section> <section>
<h4>When it runs</h4> <h4>When it runs</h4>
<p>{a.wakes}</p> <p>{a.wakes}</p>
@ -73,7 +73,7 @@ export default function AgentCard({ agentKey, onClose }) {
<section> <section>
<h4>What it can reach</h4> <h4>What it can reach</h4>
{a.tools.length ? ( {a.tools.length ? (
<ul className="card__tools"> <ul className="agc__tools">
{a.tools.map((t) => ( {a.tools.map((t) => (
<li key={t.name}> <li key={t.name}>
<code>{t.name}</code> <code>{t.name}</code>
@ -85,7 +85,7 @@ export default function AgentCard({ agentKey, onClose }) {
/* Stated positively rather than left blank. "No tools" is the /* Stated positively rather than left blank. "No tools" is the
single most reassuring fact about an agent that writes into an single most reassuring fact about an agent that writes into an
insurance file, and an empty section reads as missing data. */ 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 No tools. It reads the lead and the policy wordings, and writes its answer
back into the workflow — nothing else. back into the workflow — nothing else.
</p> </p>
@ -94,12 +94,12 @@ export default function AgentCard({ agentKey, onClose }) {
<section> <section>
<h4>What it reads</h4> <h4>What it reads</h4>
<ul className="card__kb"> <ul className="agc__kb">
{a.knowledge.map((k) => <li key={k}>{k}</li>)} {a.knowledge.map((k) => <li key={k}>{k}</li>)}
</ul> </ul>
</section> </section>
<p className="card__foot"> <p className="agc__foot">
Every step it takes is recorded against the lead, with what it wrote and why. 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. It cannot confirm a premium, issue a policy or telephone anybody.
</p> </p>