Skip to content

fix(#177): clip labels to their box - #185

Merged
octalide merged 4 commits into
devfrom
fix/177
Oct 1, 2026
Merged

octalide merged 4 commits into
devfrom
fix/177

Conversation

@octalide

@octalide octalide commented Oct 1, 2026 •

Copy link
Copy Markdown
Collaborator

Closes #177

Plan

  • theme.Style.overflow (path <kind>.overflow, a factor): below 0.5 a label too wide for its box is clipped at the box, otherwise it is cut with an ellipsis at its end. theme.base defaults it to 1 (ellipsis) for every kind. The README field table gets its row.
  • text.fit_box draws a label exactly as before when it fits its box's span. When it does not, it ellipsizes it with the feat: text styles and rich spans #80 helpers (cut/cut_at, the n-byte forms of fit/fit_at) or clips it, as the kind's overflow says. An ellipsis wider than the span falls back to clipping. text.fit_pair does the same for a label with a right-aligned value. The value keeps its width or half the room, whichever is less, and the label gets the rest.
  • Every widget that draws a label inside a box now goes through them: button, buttons, button_grid, segmented, toggle, slider (label and reading), dropdown header and options, combo header and options, tab labels and the tab overflow list, window and modal titles, section headings, table headers, list rows (this replaces their ad hoc clip) and progress text.

Decisions the issue left open

  • The default is ellipsis, not clip.
  • The span a label may take is the box minus its inset. A label that fits that span is drawn exactly as before.
  • The toggle's natural width now includes its pad.r, so a label at natural width is not cut when a theme gives the toggle right padding. This does nothing in the built-in themes (pad.r is 0).
  • Not changed: checkbox and radio labels (they sit beside a box, not in it), menu rows (the menu sizes itself to its widest row), tree rows and value or colour editor labels (they are not boxed controls).

Golden snapshot

demo/gallery/src/bin/gallery.snap is regenerated (after merging dev, from dev's golden). The only change is the gallery's closable tab label. It was clipped mid-glyph at its close box and is now cut with an ellipsis. demo/panel's snapshot is unchanged.

Ran

mach build . -p release, mach test . --filter blit.{widget,text,theme,tabs,list,table,controls,modal,style,editor}, the gallery and panel demo tests, and mach fmt --check on the root and every demo. The new test label__narrow_button_and_segmented_keep_labels_in_their_box covers a too-narrow button and segmented choice in both the ellipsis and the clip mode.

theme.Style.overflow chooses whether a label too wide for its box is
clipped at the box or cut with an ellipsis at its end, ellipsis by
default. text.fit_box and text.fit_pair draw a label, or a label and a
value, unchanged when they fit and fit to the box otherwise.
buttons and their groups, segmented choices, toggles, sliders, dropdowns
and combos with their options, tabs and the tab overflow list, window and
modal titles, section headings, table headers, list rows and progress
text draw their labels through text.fit_box, so a label too wide for its
box no longer spills over its neighbours.
the gallery's closable tab label was clipped mid-glyph at its close box,
and is now cut with an ellipsis.
# Conflicts:
#	demo/gallery/src/bin/gallery.snap
@octalide
octalide marked this pull request as ready for review October 1, 2026 16:39
@octalide
octalide merged commit d94f9e8 into dev Oct 1, 2026
2 checks passed
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.

fix: button labels spill past their button

1 participant