board theme: make wrapping the page default so no board scrolls sideways - #266
Merged
Jammy2211 merged 1 commit intoAug 24, 2026
Merged
Conversation
On a phone the Mind and Memory dashboards held the viewport while the other
organ boards scrolled right — the Heart board worst, with reason text running
off the screen edge.
The cause was that wrapping was declared per component. The shared sheet put
`overflow-wrap:anywhere` on `.task p` and `table.recent td` only, so the two
pages built entirely from those two shapes were fine, and every element an
organ adds itself — the Heart's `.reasons` list, a details block, a footer —
had no wrap at all. One run URL in a Heart red reason was enough: measured in
a headless Chromium at a 375px viewport, that page's document was 575px wide,
200px of it off-screen.
Move the guard to `body`, where `overflow-wrap` is inherited by markup this
module has never seen, and bound the things that have no wrap opportunity to
take (`img,svg,table{max-width:100%}`, `pre{overflow-x:auto}`). The two
component rules that carried their own copy drop it: one place, not seven.
Every board imports this sheet live from PyAutoBrain (Heart, Hands and the
umbrella board resolve it through their sibling checkout), so the fix lands on
the whole family without touching those repos. Re-measured after the change:
Heart 375/375 at both 390px and 320px, including a stress render with long
workspace script paths and the nowrap name column; Brain and Mind unchanged
at 375/375 and 305/305.
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
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 symptom
On a phone the Mind and Memory dashboards hold the viewport, while the other organ boards scroll right — the Heart board worst, with reason text running off the screen edge.
The cause
All six boards import one stylesheet,
board/_theme.py(Heart, Hands and the umbrella board resolve it live through their sibling checkout), so this was never a per-repo drift. The sheet declared wrapping per component:overflow-wrap:anywheresat on.task pandtable.recent tdonly.The Mind and Memory dashboards are built entirely from those two shapes, so they wrapped. Every element an organ adds itself had no wrap at all — and the Heart's
<div class="reasons"><ul><li>is exactly that. One run URL in a red reason was enough.Measured in a headless Chromium at a 375px viewport, with a red Heart fixture:
No element box was oversized — the text simply spilled out of its
<li>, which is why it reads as text going off the right of the screen rather than a widened layout.The change
Move the guard onto
body, whereoverflow-wrapis inherited by markup this module has never seen, and bound the things that have no wrap opportunity to take:The two component rules that carried their own copy drop it — one place, not seven. A board that needs a column on one line (
white-space:nowrap) still may; what it must not do is re-declare the wrap per component, which is how the family drifted into one page that scrolled and one that did not.board/AGENTS.mdrecords that as the sheet's phone invariant.Verification
nowrapname column.tests/test_board_theme.py, including one asserting no component re-declares the wrap — that per-component drift is what caused the split.PyAutoBrain465 passed; PyAutoHeart'stests/test_dashboard.py66 passed against the new theme;PyAutoMind181 passed.Sequencing
PyAutoMind'sdashboard.htmlembeds this stylesheet and is regenerated on a companion branch. Itsdashboard_refresh.ymlcheck renders with PyAutoBrain main, so this PR merges first; the Mind PR follows.Generated by Claude Code