Give a card title its width back, and plant the pin in the corner

[vmillet-dev]

#71 merged the badge onto the title's line and bought the body two lines. It
charged the title for them, and that only became visible once the README was
refilmed: titles truncated three words in.

What went wrong, measured

As a flex row the title was a column between the badge and the marks. On a
224px card at 1920 wide:

	main	here
title wrapping width	76px	136px
tick gutter	14px	8px
right reserve	50px	46px

Before #71 the title had a row of its own and wrapped inside 196px. Going to 76
is why every title ended in an ellipsis.

The head is a text block now — -webkit-box with the clamp on it rather than
on the title — with the badge and the marks inline. The title flows past them, so
it starts after the badge and its second line runs from the left edge, full
width. The two-line budget #71 asked for is unchanged; it just belongs to the
head instead of the title.

The two paddings came down with measurements rather than guesses: the controls
start 6px past where the right reserve lands, and the tick moved to left: 2px
so the gutter it needs is 8px instead of 14.

The pin leaves the sentence

⚠️ Inline with the title, a trailing glyph wrapped onto a line of its own
whenever the title happened to end near the edge — and that second line cost the
body one of its own. "Welcome to DevBox" was doing exactly that.

It is now driven into the card's top-right corner, over the border and slightly
outside it. That spot is deliberate: the copy and ⋯ buttons sit inside at 8px
and 34px from the right edge, so anything drawn in that band would be covered the
moment the pointer arrived. ⚡ and 📎 stay in the line — they say what the note
contains, where the pin says where the card is stuck.

Checked in all four states the ticket asked about (at rest, hovered, ticked,
ticked-while-hovered), on a card whose title wraps and on a todo list with no
badge. Nothing overlaps, and the pin clears the hover controls.

Checked locally

npm test 968 passing, npm run lint clean, npm run test:e2e 15/15 in 4:03.

⚠️ #113 refilms the README and is now behind this: its images show the layout
this replaces. It needs the pictures retaken once this lands.

🤖 Generated with Claude Code