From 1cbb8544c127cbc61c14a1ab66c56b7989fde606 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 24 Aug 2026 21:23:56 +0000 Subject: [PATCH] dashboard: pick up the bounded pill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Regenerated with `pyauto-brain intake dashboard --apply` after PyAutoBrain bounded `.pill` so an over-long chip elides instead of widening the page. CSS only — this page's own chips are short facet values and already fitted; the regeneration keeps its embedded stylesheet in step with the family. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01VhpLPmmoSFAtVpppG8azVA --- dashboard.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/dashboard.html b/dashboard.html index 66199ca6..99016209 100644 --- a/dashboard.html +++ b/dashboard.html @@ -97,9 +97,17 @@ /* --- facet pills: the backlog, scannable by colour --------------------- */ .facets{color:var(--muted);font-size:.85em} .tags{display:block;margin-top:.32rem;line-height:1.9} -.pill{display:inline-block;padding:.06em .5em;border-radius:999px; +/* A pill is a LABEL, and a label that will not fit is elided, never allowed + to push the page sideways. `nowrap` is what makes a chip read as a chip, so + it is also the one thing the page-wide wrap guard above cannot reach: an + over-long value (a board handing a whole log sentence to a facet) used to + run a chip a thousand pixels wide. The row's prose carries the meaning; the + chip carries the word. `vertical-align:bottom` because `overflow:hidden` + moves an inline-block's baseline to its bottom edge. */ +.pill{display:inline-block;max-width:100%;padding:.06em .5em;border-radius:999px; font-size:.74em;font-weight:650;letter-spacing:.015em;white-space:nowrap; - vertical-align:.09em;border:1px solid var(--edge);background:var(--tint); + overflow:hidden;text-overflow:ellipsis; + vertical-align:bottom;border:1px solid var(--edge);background:var(--tint); color:var(--accent)} .pill+.pill{margin-left:.28rem} .pill.n{border-color:var(--line);background:var(--btn);color:var(--muted)}