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(
e.stopPropagation()} > -
- +
+

{a.full}

{a.does.charAt(0).toUpperCase() + a.does.slice(1)}.

@@ -64,7 +64,7 @@ export default function AgentCard({ agentKey, onClose }) {
-
+

When it runs

{a.wakes}

@@ -73,7 +73,7 @@ export default function AgentCard({ agentKey, onClose }) {

What it can reach

{a.tools.length ? ( -
    +
      {a.tools.map((t) => (
    • {t.name} @@ -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. */ -

      +

      No tools. It reads the lead and the policy wordings, and writes its answer back into the workflow — nothing else.

      @@ -94,12 +94,12 @@ export default function AgentCard({ agentKey, onClose }) {

      What it reads

      -
        +
          {a.knowledge.map((k) =>
        • {k}
        • )}
      -

      +

      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.