Skip to content

dashboard: an out-link label may wrap — the last nowrap that broke the phone #174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jammy2211 merged 1 commit into from
Aug 24, 2026
Merged

dashboard: an out-link label may wrap — the last nowrap that broke the phone #174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion heart/dashboard.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1284,7 +1284,15 @@ def _html_reason(item: dict) -> str:
ul.det{margin:.35rem 0 0;padding-left:1.1rem;color:var(--muted);
font-size:.85rem}
.ago{color:var(--muted)}
a.out{font-size:.85rem;white-space:nowrap}
/* The out-links carry DATA in their labels — `<repo> run`, and this org's
longest repo name is 36 characters. `nowrap` made one of those a single
unbreakable 500px word, which set the summary column's min-content width
and pushed the whole page sideways on a phone (measured: a 375px viewport
scrolling to 521px). Nothing is lost by letting them wrap: a short label
like `run ↗` has no wrap opportunity to take, and a long one should break
rather than break the page. The shared theme's `overflow-wrap` does the
rest. */
a.out{font-size:.85rem}
.stale{background:var(--btn);border:1px solid var(--warn);color:var(--warn);
padding:.55rem .75rem;border-radius:8px}
.reasons{margin:1.5rem 0}
Expand Down
15 changes: 15 additions & 0 deletions tests/test_dashboard.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -840,3 +840,18 @@ def test_html_wears_the_shared_family_theme():
assert t.ORGANS[dashboard.BOARD_KEY]["tagline"] in out
assert t.ORGANS[dashboard.BOARD_KEY]["ink_dark"] in out
assert "#58a6ff" not in out # the old hard-coded GitHub blue


def test_a_long_out_link_label_cannot_push_the_page_sideways():
"""The out-links carry DATA in their labels (`<repo> run`), and this org's
longest repo name is 36 characters. Under `white-space:nowrap` that was a
single unbreakable ~500px word: it set the summary column's min-content
width and scrolled the whole board sideways on a phone (a 375px viewport
measured 521px). Short labels have no wrap opportunity to take, so nothing
is lost by letting them break."""
out = dashboard.render(
_failing_snapshot() if "_failing_snapshot" in globals() else make_snapshot(),
make_verdict("red", 40, red_reasons=["RepoA: CI failure"]),
fmt="html", now=FRESH_NOW)
rule = re.search(r"a\.out\{[^}]*\}", out).group(0)
assert "nowrap" not in rule
Loading