Keep a board tile's miniature inside its slot, however many columns #247

Merged
Grandiras merged 1 commit from fix/home-mini-many-columns into main 2026-10-03 13:52:25 +00:00
Owner

What

A board tile's miniature on Home now draws at most five column tracks and fades a sixth (board-mini-column-more), the same way a full column already draws five dashes and fades a sixth (MiniCardCap). Boards with 3–5 columns look exactly as before.

Why

Each .board-mini-column has fixed horizontal padding (14px, 10px on a phone) and the tracks are 6px apart, and neither can shrink. On a phone the picture's slot is 104px, so eight columns needed 122px and ran 3.6px onto the board's name (measured at 390px). On desktop the same happens past about 11 columns, where the tracks spill out of the tile. Six tracks need 90px on a phone and 114px on desktop, so the picture always fits.

I capped the tracks instead of letting them shrink. Shrinking would need gaps and padding that depend on the column count, and by six columns a phone's dashes are already down to dots, so more tracks would add nothing a member could read.

Checks

  • tools/verify.sh: build and 584 unit tests pass.
  • home.spec.js and board-entrance.spec.js pass on an isolated stack (13/13). The phone tile test now gives its board eight columns (by SQL) and asserts six tracks, the last one faded, all inside the picture.
  • Looked at 390px and 1280px, in light and dark.
  • docs/boards-and-permissions.md (the miniature bullet) says why.

No changelog line: Changelog.Unreleased is at its 7-bullet cap (ChangelogTests), and this falls under the existing "A fresh look" bullet.

🤖 Generated with Claude Code

## What A board tile's miniature on Home now draws at most five column tracks and fades a sixth (`board-mini-column-more`), the same way a full column already draws five dashes and fades a sixth (`MiniCardCap`). Boards with 3–5 columns look exactly as before. ## Why Each `.board-mini-column` has fixed horizontal padding (14px, 10px on a phone) and the tracks are 6px apart, and neither can shrink. On a phone the picture's slot is 104px, so eight columns needed 122px and ran 3.6px onto the board's name (measured at 390px). On desktop the same happens past about 11 columns, where the tracks spill out of the tile. Six tracks need 90px on a phone and 114px on desktop, so the picture always fits. I capped the tracks instead of letting them shrink. Shrinking would need gaps and padding that depend on the column count, and by six columns a phone's dashes are already down to dots, so more tracks would add nothing a member could read. ## Checks - `tools/verify.sh`: build and 584 unit tests pass. - `home.spec.js` and `board-entrance.spec.js` pass on an isolated stack (13/13). The phone tile test now gives its board eight columns (by SQL) and asserts six tracks, the last one faded, all inside the picture. - Looked at 390px and 1280px, in light and dark. - `docs/boards-and-permissions.md` (the miniature bullet) says why. No changelog line: `Changelog.Unreleased` is at its 7-bullet cap (`ChangelogTests`), and this falls under the existing "A fresh look" bullet. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
Keep a board tile's miniature inside its slot, however many columns
All checks were successful
CI / build (pull_request) Successful in 44s
a8affd6077
A miniature track's padding and the gaps between tracks cannot shrink, so
eight columns needed 122px of a phone tile's 104px and ran onto the board's
name (and enough columns would overrun a desktop tile too). Draw at most
five tracks and fade a sixth, as a full column already does with its cards.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Collaborator

🤖 Reviewing this PR — the review will link the full session transcript.

📜 Live transcript — updating every ~5 minutes while the review runs.

🤖 Reviewing this PR — the review will link the full session transcript. <!-- opencode-run:review --> 📜 [Live transcript](https://git.grandiras.net/Grandiras/opencode-bot/src/branch/opencode-logs/transcripts/Grandiras/Ponente/pr-247/run-2026-10-03T13-41-09-187Z.md) — updating every ~5 minutes while the review runs.
Collaborator

🤖 Reviewing this PR — follow along in the action run; the reply will link the full session transcript.

📜 Live transcript — updating every ~5 minutes while the task runs.

🤖 Reviewing this PR — follow along in [the action run](https://git.grandiras.net/Grandiras/claude-bot/actions/runs/687); the reply will link the full session transcript. <!-- claude-run:pr_review --> 📜 [Live transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/pr-247/run-687.md) — updating every ~5 minutes while the task runs.
claude-reviewer left a comment

✅ Verdict: approve — no blocking issues found.

The change is correct and small. The for loop renders at most MiniColumnCap + 1 tracks, which is six. The sixth gets board-mini-column-more, and the CSS shares the 0.4 opacity rule with the faded card dash. Boards with 5 or fewer columns render as before.

The e2e SQL insert matches the BoardColumn entity (BoardId, Name and Position are the only columns). The test checks the count, the faded class and containment in the picture. The docs bullet explains the reason.

Two small notes, neither blocking:

  • Home.razor emits a trailing space in the class attribute when the track isn't faded, which is harmless.
  • home.spec.js titles the block "Phone (375px)", while the PR description says it measured at 390px.

🧠 claude-sonnet-5-5 · ⏱ 0m 12s · 4 turns · tokens: 24.9k in / 759 out (+48.0k cache-read)
📜 Full session transcript

✅ **Verdict: approve** — no blocking issues found. The change is correct and small. The `for` loop renders at most `MiniColumnCap + 1` tracks, which is six. The sixth gets `board-mini-column-more`, and the CSS shares the 0.4 opacity rule with the faded card dash. Boards with 5 or fewer columns render as before. The e2e SQL insert matches the `BoardColumn` entity (`BoardId`, `Name` and `Position` are the only columns). The test checks the count, the faded class and containment in the picture. The docs bullet explains the reason. Two small notes, neither blocking: - Home.razor emits a trailing space in the class attribute when the track isn't faded, which is harmless. - `home.spec.js` titles the block "Phone (375px)", while the PR description says it measured at 390px. --- 🧠 claude-sonnet-5-5 · ⏱ 0m 12s · 4 turns · tokens: 24.9k in / 759 out (+48.0k cache-read) 📜 [Full session transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/pr-247/run-687.md) <!-- claude-verdict:approve --> <!-- claude-reviewed-head:a8affd6077f72df967acf4abca0a16d4745ae6b4 -->
opencode-reviewer left a comment

✅ Verdict: approve — no blocking issues found.

Good to merge. The cap mirrors the existing MiniCardCap pattern exactly: a fifth-plus-one loop bound, a faded sixth track via .board-mini-column-more sharing the .board-mini-card-more opacity rule. Boards with 3–5 columns render identical markup to before (the class only lands at index 5). The loop is safe for any ColumnCardCounts.Count thanks to Math.Min. The e2e test strengthens the phone assertions (six tracks, last faded, contained within the picture's box) rather than just relaxing the old fit assertion, and the doc bullet explains the why in the repo's own voice. No issues found.


⏱ 1m 14s · 3 steps · $0.0035 · tokens: 21.1k in / 397 out (+0 cache-read) · Go: 5h 0% · wk 10% · mo 87%
📜 Full session transcript

✅ **Verdict: approve** — no blocking issues found. Good to merge. The cap mirrors the existing `MiniCardCap` pattern exactly: a fifth-plus-one loop bound, a faded sixth track via `.board-mini-column-more` sharing the `.board-mini-card-more` opacity rule. Boards with 3–5 columns render identical markup to before (the class only lands at index 5). The loop is safe for any `ColumnCardCounts.Count` thanks to `Math.Min`. The e2e test strengthens the phone assertions (six tracks, last faded, contained within the picture's box) rather than just relaxing the old fit assertion, and the doc bullet explains the *why* in the repo's own voice. No issues found. --- ⏱ 1m 14s · 3 steps · $0.0035 · tokens: 21.1k in / 397 out (+0 cache-read) · Go: 5h 0% · wk 10% · mo 87% 📜 [Full session transcript](https://git.grandiras.net/Grandiras/opencode-bot/src/branch/opencode-logs/transcripts/Grandiras/Ponente/pr-247/run-2026-10-03T13-41-09-187Z.md) <!-- opencode-reviewed-head:a8affd6077f72df967acf4abca0a16d4745ae6b4 --> <!-- opencode-verdict:approve -->
Grandiras deleted branch fix/home-mini-many-columns 2026-10-03 13:52:25 +00:00
Sign in to join this conversation.
No labels
No milestone
No project
No assignees
5 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Grandiras/Ponente!247
No description provided.