Tag hang catalogue

1 · Quote card — the tag row under the quote

.quote-card .badges · molecules/badge-row.css · rendered by QuoteCard.tsx on Quotes, Screens (ScreensLens.tsx), Discussion (DiscussionLens.tsx, its own markup with the same classes) and the uncategorised floor

before · light

after · light

before · dark

after · dark

Hover: the × circles and the proposed badge's action pill

before · light

after · light

before · dark

after · dark

A quote with no tags yet: the add button starts the row

before · light

after · light

before · dark

after · dark

Should the speaker badge hang too? Only if it starts a line, and it doesn't always

speaker hung · wrapped · light

speaker hung · inline · light

speaker hung · wrapped · dark

speaker hung · inline · dark

Screens lens — the same card, compact (`screens.css` rules inlined)

before · light

after · light

before · dark

after · dark

Commentary

Every wrapped line's first tag hangs, because the outdent is on the flex-wrap container, not on a badge. The words of Confusion and workaround start on the quote's own left edge, under the opening quotation mark.

The row gets 7.2px wider, because a negative margin on a block widens it. So a row can wrap differently after: here expectation mismatch moves up beside Confusion in the 387px card.

Proposed and add badges land 1px off (the +1.0 readings). Both draw a 1px dashed border that a solid tag doesn't, so their words sit 1px further in. To fix it, take 1px off their side padding: .badge-proposed, .badge-add { padding-inline: calc(var(--bn-badge-pad-x) - 1px) }. Their boxes then also match a solid tag's width, so accepting a proposal no longer shifts the row by 2px. That fix isn't in the after frames, so you can see the 1px it addresses.

The × circles and the action pill sit on the badge's right, so hanging left doesn't move them. Nothing to the left clips: the card edge is 72px from the hung box, and no ancestor between them sets overflow.

The speaker badge shouldn't hang. It follows the quote on the same line whenever it fits, and only drops to its own line when it doesn't. Hung, the wrapped case lines up, but the inline case runs over the closing quotation mark. CSS can't tell the two apart. Hanging only the tags leaves the speaker box 7.2px right of the tag boxes in the wrapped case. That's the one visible cost.

Screens renders QuoteCard, and Discussion renders its own blockquote.quote-card with the same .badges row, so one rule covers both. No trial project has Screens or Discussion data, so neither was measured live; the compact frame measures the rule against the Screens card's own CSS.

2 · Transcript margin — tags under the section label

.margin-tags · molecules/transcript-annotations.css · components/Annotation.tsx

before · light

Task Initiation and Context

prior experience

Checkout and Delivery

frictionexpectation mismatchfeature request

after · light

Task Initiation and Context

prior experience

Checkout and Delivery

frictionexpectation mismatchfeature request

before · dark

Task Initiation and Context

prior experience

Checkout and Delivery

frictionexpectation mismatchfeature request

after · dark

Task Initiation and Context

prior experience

Checkout and Delivery

frictionexpectation mismatchfeature request