Tweak mobile board view to have less padding overall while still not appearing crowded #188
Labels
No labels
No milestone
No project
No assignees
2 participants
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
Grandiras/Ponente#188
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
We're right now wasting a lot of space on mobile
🤖 On it — follow along in the action run; the reply will link the full session transcript.
📜 Live transcript — updating every ~5 minutes while the task runs.
The work is done and pushed. Here's my report:
The phone board was spending a quarter of the screen on nothing, and it was three insets doing it, not one: the board's padding, the column's rail, and the card's own padding — each worth about
1.15rem, stacked, before the first letter of a card. That figure is fine on a desktop, where it comes out of a 320px column with a page around it; on a 412px phone the column is the page, so the same three came to 98px and titles wrapped to two lines that had no need to. On top of that, the phone block was padding.cardat1.1rem— more than the desktop — filed under "touch targets", though the target is the whole 130px tile.All three shrink together (
0.5rem/0.7rem/0.85rem), rather than one of them being cut hard. That's the part the issue's "while still not appearing crowded" is about: what makes a board readable at a glance is that the steps page → column → card are visible, and a column whose cards touch its edges is what crowded actually looks like. Each step is still there, just smaller.Text now starts at 32.8px instead of 48.8px — 32px more line — and a card is about 20% shorter. The column header also stops padding around its own 2.25rem filter button.
One cleanup the change forced. The column's inset was four copies of
1.15remin four places that have to agree: the header's label, the hairline under it, the cards, and the add-card button. Making one of them narrower on a phone would have left the column with two left edges — so it is now a--column-railtoken, overridden once in the phone block. The hairline is the one that would have been missed: it's an absolutely positioned::aftercarrying its own copy of the number.What I verified (compose isn't available in this container, so I ran the app directly against a local Postgres and drove it with Playwright):
dotnet buildanddotnet testgreen — 477 passing, includingDocumentationTests.mobile.spec.js,board.spec.js,filter.spec.jspass against the running app. The new assertions inmobile.spec.jsfail on the old CSS (48.78 < 37.5→ false), so they're a real pin, not a tautology.3remon.column's max-height; I wrote it out as padding + pill so shrinking the padding couldn't silently eat it.docs/frontend.mdgets two bullets — the rail token and why it's a token, and the three-inset reasoning including why cutting one to zero was the wrong answer.Changelog.Unreleasedgets a line in both locales.One caveat, stated plainly: in one combined run,
mobile.spec.js's "the card dialog fills the phone, and only its pickable chips are targets" failed once. I re-ran that exact file ordering twice more plus the test in isolation — all passed — and I discarded the artifact before reading the assertion, so I can't say what it was. It touches nothing my diff changes (the modal sheet and the chip min-heights are untouched), but I'd rather flag it than not.Branch pushed:
claude/issue-188.⏱ 20m 20s · 114 turns · tokens: 154.2k in / 44.8k out (+11383.0k cache-read)
📜 Full session transcript
→ Opened PR: #189
@claude-bot Please align the column header with the start of the cards to make it look more consistent. Also, please move the page indicator at the bottom a few pixels down to make it have the same space between it and both the nav bar and the board column.
🤖 On it — follow along in the action run; the reply will link the full session transcript.
📜 Live transcript — updating every ~5 minutes while the task runs.
Both done and pushed to the same branch, so they land on PR #189.
The header. It was already on
--column-rail— the line the card tiles start from — which is why the previous change treated it as aligned. But the label is text, and the text under it (every card title) sits one card-padding further in, so the heading hung 13.6px out to the left of the whole stack. The phone block now pads it tocalc(var(--column-rail) + var(--card-inset)):To Dostarts exactly whereDesign the invite flowdoes (32.80px vs 32.78px measured).Only the left edge moves. On the right there is no text line to join — just the tiles' right edge — and the count badge and the filter button are already on it, so moving them in would have broken a line that was right. The hairline under the header stays on the rail with the tiles for the same reason.
The page indicator. The pill is
position: fixedabove the nav bar, while the column above it is sized by amax-heightthat has to leave room for it — two unrelated declarations deciding one strip. They had drifted: 0.4px above the pill, 9.6px below it, which is why it read as resting on the column. The strip is now--phone-pager-hplus two--phone-pager-gap; the column subtracts the whole strip and the pill is placed one gap up from the bar, so the two are equal by construction rather than by two numbers happening to agree. Measured after: 5px and 5px. The column doesn't move at all — the pill drops 4.6px, which is the "few pixels down" you asked for.Verified (compose isn't available here, so the app ran directly against a local Postgres, driven by Playwright):
dotnet buildanddotnet testgreen — 477 passing,DocumentationTestsincluded.mobile.spec.jsgained an assertion for each change, and I checked both fail on the pre-change CSS: the label one reports19.19against32.78, the pill one0.40625is not> 2. Real pins, not tautologies.mobile.spec.js,board.spec.js,filter.spec.js,boards.spec.jsall pass..cardnow reads its inline padding from--card-inset, whose:rootvalue is the same1.15remit had, and the computed padding is16px 18.4pxat both widths as before.docs/frontend.mdgets the reasoning for both (the two lines a column has, and why the pager strip is two tokens); the unreleased changelog line gains a clause about the column name in both locales — the pill's 4.6px isn't worth a member's line.One thing I deliberately left alone, and you should decide it: the same 18.4px offset exists on desktop and tablet, where the header label is also on the tile edge rather than the title line. I scoped the fix to the phone block because that's what this issue is about and because a desktop column reads differently — it's a 320px panel in a row of panels, so its label brackets the panel rather than heading a page. If you want it everywhere, it's a one-line change to the base
.column-header, plus a pass over every desktop frame on the canvas. Say the word.One caveat:
boards.spec.js's "the nav switches boards…" failed once on its teardown (the test's own board not disappearing from/admin/boards), then passed on a re-run of the whole file. It's in the cleanup path and touches nothing this diff changes, but I'd rather name it.⏱ 14m 16s · 84 turns · tokens: 100.2k in / 38.5k out (+5970.8k cache-read)
📜 Full session transcript