board: on a phone a table row is a card, not a ribbon - #272
Merged
Jammy2211 merged 1 commit intoAug 24, 2026
Conversation
The sideways scroll is gone, and what it was hiding is now the problem: a
four-column row does not fit a phone, it just stops overflowing. Measured on
the Mind dashboard's Recent feed at a 375px viewport, the meta columns took
156px and the text was left 187 — half the screen — so every entry wrapped
into a tall thin column down the right while `when` and `what` sat beside it
as empty height. The Heart board is the same shape and worse: its summary had
213px of 390 and one row ran 472px down the screen.
Below 34rem the row stacks instead. The meta cells read as one small header
line with the 📋 at its end, and the text takes a full-width line underneath:
187px -> 343px on the Mind feed, and each board's own cells fall into the same
frame (the Heart's dot and title lead, its summary follows).
`:not([hidden])` on the flex rule is load-bearing rather than defensive:
`display:flex` outranks the UA sheet's `[hidden]{display:none}`, so a bare
`table.recent tr` selector reveals the whole paged Recent feed at once — 50
rows instead of 10. Caught by the page growing from 6.3k to 11.5k pixels
between two renders; pinned by a test.
469 tests pass, three new (the stack, the text's full-width line, the hidden
guard). The wide layout is untouched — the media query is the only new
selector above 34rem.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VhpLPmmoSFAtVpppG8azVA
This was referenced Aug 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The sideways scroll is gone (#266, #270, PyAutoHeart#174) and what it was hiding is now the problem: a four-column row does not fit a phone, it just stops overflowing.
The measurement
At a 375px viewport, per row:
The meta columns took 156px of 375 on the Mind feed, so every entry wrapped into a tall thin column down the right while
whenandwhatsat beside it as empty height — text bunched to the right, running a long way down, with whitespace where the columns were.The change
Below 34rem the row stacks: the meta cells read as one small header line with the 📋 at its end, and the text takes a full-width line underneath. Each board's own cells fall into the same frame — the Heart's dot and title lead, its summary follows (that half is PyAutoHeart's own three lines, since the theme owns only the cells it defines).
The wide layout is untouched: the media query is the only new selector, and above 34rem nothing matches.
One trap worth naming
:not([hidden])on the flex rule is load-bearing, not defensive.display:flexoutranks the UA stylesheet's[hidden]{display:none}, so a baretable.recent trselector reveals the whole paged Recent feed at once — 50 rows instead of 10. Caught by the page growing from 6.3k to 11.5k pixels between two renders, and pinned by a test.Tests
469 pass, three new: the stack, the text's full-width line, and the hidden-row guard.
Generated by Claude Code