fix(web): define the layout utilities the screens were already using
Build and Push Images / Build jorgecuadros-web (push) Successful in 2m5s
Build and Push Images / Build jorgecuadros-api (push) Successful in 2m50s

The policy OCR review header read
"Para revisarPágina 1700489616· PAMELA DENISE WAGONERLICENCIASANA".

`.row`, `.stack`, `.tag`, `.page-sub` and `.state-warn` are used across the
app but no rule ever defined them. Without `display: flex` the `gap` those
call sites pass does nothing, and JSX drops the newline between sibling
elements, so the header's spans concatenated. `.tag` rendered as prose rather
than as a chip for the same reason.

Defined against the existing design tokens: `.tag` takes `.badge`'s shape,
`.state-warn` is the gold sibling of `.state-error`, and `p.page-sub` keeps
the block margin while the inline form drops it so a flex row still centres.

Also dropped the hand-rolled "· " separator and margin from the OCR header —
the flex gap does that now, and the literal dot was left floating in it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-15 12:58:25 -07:00
co-authored by Claude Opus 5
parent 458b2b272d
commit 2f99bd5f98
2 changed files with 63 additions and 4 deletions
+5 -4
View File
@@ -359,11 +359,12 @@ function DocumentRow({ doc, customerIndex, canReview, onSave, onReject }: Docume
<header className="row" style={{ gap: 12, alignItems: "center" }}>
<span className="tag">{STATUS_LABEL[doc.status] ?? doc.status}</span>
<span className="page-sub">Página {doc.pageNumber}</span>
{doc.extractedPolicyNumber && (
<strong style={{ marginLeft: 8 }}>{doc.extractedPolicyNumber}</strong>
)}
{/* No hand-rolled separators or margins here: `.row` is a flex
container and its gap does the spacing. A literal "· " would leave
a dot floating in that gap. */}
{doc.extractedPolicyNumber && <strong>{doc.extractedPolicyNumber}</strong>}
{doc.extractedInsuredName && (
<span className="page-sub">· {doc.extractedInsuredName}</span>
<span className="page-sub">{doc.extractedInsuredName}</span>
)}
{/* Read-only: the parser names the type, the confirm step resolves it
to a policy_types row. Reassigning it is the policy screen's job,