Draw the badge whole, with one ring around the selected one

[vmillet-dev]

Closes #201. ⚠️ Both halves are mine, from #196 — and neither had the cause I put in the ticket.

The crop was not the extra two pixels

The ticket said the hairline made the badge taller than the band. Measured, the band was 17px holding a 19px child, which is not something a flex container sized on its content does.

.lang-tag is a <span> with no display, so it is inline. An inline box's padding and border do not count toward the line box its host is sized to — they simply hang outside it. .card-head is overflow: hidden, so they were cut. ⚠️ It already overflowed by about 1.5px before #196; the hairline took it to 3 and made it visible.

display: inline-flex on the badge. cutByBand 3 → 0, and the band grows to 20 to hold its child.

The ring

before   chip 23px, radius 6   badge 19px, radius 4   →  two outlines, two pixels apart
after    one, the badge's

The chip keeps its padding — that is what it is clickable by — but stops drawing a box of its own. The badge's border takes the amber on selection, so there is one ring and it hugs what it is selecting.

⚠️ The hairline could not simply be removed: --bg-3 sits at 1.1:1 against every light surface, and without it the badge is bare text again. That is what #196 was for, and I only found it by looking at a screenshot rather than at the numbers.

Incidentally the chip goes from 23px to 26px, clearing the 24px #176 asks of a control — it was not in the seven that ticket listed, which was an oversight.

The assertion

expect(boxes?.cutByBand).toBe(0);
expect(boxes?.outlines).toBe(1);

⚠️ outlines counts borders that are actually visible: a transparent border is not an outline whatever its width says, and the chip still declares one so its box stays the size a pointer expects.

Reproduced and measured before the fix, measured again after, and looked at in both states — the two concentric rings are unmistakable in the before.

🤖 Generated with Claude Code