Skip to content

Give the card's first line back to the note - #301

Merged
vmillet-dev merged 1 commit into
mainfrom
card-relayout
Sep 22, 2026
Merged

vmillet-dev merged 1 commit into
mainfrom
card-relayout

Conversation

@vmillet-dev

Copy link
Copy Markdown
Owner

Closes #250. First of the three card tickets — #182 fills the ⋯ menu this moves, #184 animates what this draws.

The card opened with a .card-head band carrying the pin, the format badge, the fields mark and the attachment count, then the title below it. That band cost a line of a card that is a fixed 150px, and it said nothing about the note that the marks themselves do not.

One row now holds the tick, the title and the marks. The title takes the room and gives way to the marks (flex: 1 plus min-width: 0, without which a long title pushes them off the card instead of clamping). The body got the line back: SNIPPET_LINES went from four to five.

The decision the ticket did not settle

The Shape asks for the marks at the top right and says "the tick keeps its own corner". Those two cannot both be the floating pill: it hangs at top: -9px, its bottom lands at about +15px, and the title row starts at --space-card — 14px comfortable, 10px compact. Anything floating in that corner sits on top of the marks.

So the tick moved into the flow, at the head of the row. It is the card's top-left corner, it collides with nothing, and it is always drawn — quiet at rest, amber once ticked. ⚠️ That is a visible change on every card: the tick used to appear only on hover or when checked. I think it is the right side of the trade (a selection affordance nobody sees is one nobody uses, and it is what makes #248's band discoverable), but it is the part of this PR I would most expect you to push back on.

The two actions — copy or ⚡, and the ⋯ — keep their pill, mirrored to the card's bottom-right edge, on hover and on focus. Outside rather than in the flow, so they still cost the card no room.

Two smaller ones

  • ⚠️ MAX_VISIBLE_ITEMS deliberately did not move, although the ticket names it. A todo list with nothing to mark never drew that band, so it gave nothing up — and 21px recovered is less than the 24px a row needs now that every row clears the hit target. A third row would be clipped.
  • .card-arming — the red "Suppr. à nouveau" band — keeps the footer line inside the card, and the pill now hangs 9px under it. The pill stands down while the card is asking: a copy button and a ⋯ beside "delete again?" are noise, and :focus-within keeps the keyboard's way in. 04-trash-and-undo reads the computed opacity for that.

What the tests had to learn

  • 02-note-lifecycle measured titleWidth === snippetWidth, which is no longer true by design — the marks take part of that row. It now measures what replaced it: the row starts at the card's edge, the marks end at its right, nothing sits above the row, and the body starts immediately under it.
  • canvas.badgeBoxes looked for .card-head to check the badge's hairline is not cut by the band holding it. Same invariant, new box: .card-marks.

1429 front-end tests and the full e2e suite green locally — 21/21. Screenshots of the canvas, the board, the hover pill and a card inside a zone were read before calling it done; the first run of the suite caught both assertions above.

The marks share the title's row instead of having a band of their own,
the tick joins them in the flow, and the two actions move to a pill under
the card's bottom edge. The body gets the line, four snippet lines to five.
@vmillet-dev
vmillet-dev merged commit ef124db into main Sep 22, 2026
11 checks passed
@vmillet-dev
vmillet-dev deleted the card-relayout branch September 22, 2026 00:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A card spends its first line on a band that says nothing about the note

1 participant