Draw every row of a todo list inside the card that holds it

[vmillet-dev]

Closes #200.

⚠️ My own regression, from #176. Growing a todo row from 19px to 24px to clear WCAG's target size pushed the list past the room a card has for it, and the first row was drawn nine pixels above its own box and cut in half.

Reproduced before anything was touched

before   list 53px   row 1 → drawn 9px outside   row 2 → 0
after    list 53px   row 1 → 0                   row 2 → 0

Where a card's 150px goes, measured rather than guessed: title 17, progress 13 (+8 of margin), list 53, footer 13. The list was asking for 24 + 24 + 14 — those 14 being the "+N autres" line, which lives inside it.

.card-items is flex: 1 with justify-content: flex-end and overflow: hidden, so the overflow leaves through the top. That is why the first row went and not the last.

Why the card did not simply get taller

That was my own preferred shape in the ticket, and it is dearer than it looks: folders/board.rs carries CARD_HEIGHT: i32 = 150, and every zone frame on the board is computed from it. ⚠️ It is a cross-bridge constant, and zones already stored were sized against the old value — they would come up short by a row's worth of pixels, on boards that already exist.

So the fourteen pixels are given back rather than added: "+N autres" moves onto the progress line, beside the 1/6 that already states the total. Nothing disappears, the card does not move, and the bridge is untouched.

The assertion #176 needed and did not have

07-checklists already checked that both rows are in the DOM and that the badge agrees with MAX_VISIBLE_ITEMS. Both passed the entire time the row was cut in half — neither asks whether a row is drawn inside its container.

const overflow = await canvas.rowOverflow(title);
expect(overflow).toEqual(overflow?.map(() => 0));

Zero pixels outside the box, per row. That is the test that would have failed the day #176 landed.

Looked at

Built the old state back to photograph it, so the before is the same card at the same width rather than a report screenshot. Both images are in the conversation; the clipped row is unmistakable in one and whole in the other.

🤖 Generated with Claude Code