From 1578598c58f9dfe34a1ce95e8635e30808599e5f Mon Sep 17 00:00:00 2001 From: Jammy2211 Date: Fri, 28 Aug 2026 10:51:03 -0400 Subject: [PATCH] feat(board): size a worded copy chip to its label, not to the icon square MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `button.copy` is a fixed 2.6rem square, which is exactly right for a bare clipboard glyph and a trap for a button that carries words: the label wraps inside 42px into a one-word-per-line column and spills out of its own box. Reported from a laptop against the health board's "clear them all" line, the one place in the family that gives a copy button a worded face. `button.copy.text` sizes to the label and holds it on one line the way `.pill` does — elided rather than allowed to push the page sideways. Opt-in, so every bare-glyph button in every board keeps the square it was drawn for. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_018q6ZrgG6u8o8ENYZ7cq3Lr --- board/_theme.py | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/board/_theme.py b/board/_theme.py index 34d45ff..161a3f6 100644 --- a/board/_theme.py +++ b/board/_theme.py @@ -414,6 +414,17 @@ def mark(key): button.copy:hover{border-color:var(--accent);color:var(--accent)} button.copy.ok{color:var(--ok);border-color:var(--ok);background:transparent} button.copy.term{font-size:.95rem} +/* A copy button with a WORDED face is a chip, not an icon. The rule above is + a fixed 2.6rem square — right for a bare clipboard glyph, a trap for a + label: the text wraps inside 42px into a one-word-per-line column and + spills out of its own box (observed on the health board's "clear them all" + line). Size to the label instead, and hold it on one line the way `.pill` + does — a chip that will not fit is elided, never allowed to push the page + sideways. `vertical-align:bottom` because `overflow:hidden` moves an + inline-block's baseline to its bottom edge. */ +button.copy.text{width:auto;height:auto;max-width:100%%;padding:.34rem .62rem; + font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden; + text-overflow:ellipsis;vertical-align:bottom} button.more{display:block;width:100%%;margin:.7rem 0;padding:.55rem; border:1px dashed var(--edge);border-radius:9px;background:transparent; color:var(--muted);cursor:pointer;font:inherit;font-size:.9em}