Skip to content

board theme: make wrapping the page default so no board scrolls sideways - #266

Merged
Jammy2211 merged 1 commit into
mainfrom
claude/mobile-scroll-dashboard-inconsistency-7xoqnu
Aug 24, 2026
Merged

board theme: make wrapping the page default so no board scrolls sideways#266
Jammy2211 merged 1 commit into
mainfrom
claude/mobile-scroll-dashboard-inconsistency-7xoqnu

Conversation

@Jammy2211

Copy link
Copy Markdown
Contributor

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:anywhere sat on .task p and table.recent td only.

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:

before:  VW=375  SCROLLW=575     ← 200px off-screen
         overflowing text: ": CI failure on main — https://github.co…"  parent=LI
after:   VW=375  SCROLLW=375

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, where overflow-wrap is inherited by markup this module has never seen, and bound the things that have no wrap opportunity to take:

body{…;overflow-wrap:anywhere}
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. 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.md records that as the sheet's phone invariant.

Verification

  • Heart: 375/375 at both 390px and 320px, including a stress render with long workspace script paths, long section titles and the nowrap name column.
  • Brain board and the Mind dashboard: unchanged, 375/375 and 305/305.
  • Three new contract tests in tests/test_board_theme.py, including one asserting no component re-declares the wrap — that per-component drift is what caused the split.
  • PyAutoBrain 465 passed; PyAutoHeart's tests/test_dashboard.py 66 passed against the new theme; PyAutoMind 181 passed.

Sequencing

PyAutoMind's dashboard.html embeds this stylesheet and is regenerated on a companion branch. Its dashboard_refresh.yml check renders with PyAutoBrain main, so this PR merges first; the Mind PR follows.


Generated by Claude Code

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
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.

2 participants