diff --git a/docs/architecture/ribbon.md b/docs/architecture/ribbon.md index 3d2575d..68ed494 100644 --- a/docs/architecture/ribbon.md +++ b/docs/architecture/ribbon.md @@ -109,7 +109,7 @@ at every height. A flex row cannot reserve width in part of its height, so it mo | --- | --- | | `Ribbon.svelte` | Shell, tab state, the File menu, which contextual tabs are shown | | `RibbonGroup.svelte` | A group: its controls, its visible label, Word's ↘ dialog launcher | -| `RibbonButton.svelte` | `big` / `small` / `icon`, plus the split button. Hover paints the **icon box**, not the whole button. A big label wraps onto two lines at a 78px cap and its caret rides beside the icon, so a three-word label costs width instead of a third row | +| `RibbonButton.svelte` | `big` / `small` / `icon`, plus the split button. Hover paints the **icon box**, not the whole button. A big label wraps onto two lines at a 78px cap and its caret rides beside the icon, so a three-word label costs width instead of a third row; a one- or two-word label takes the width it wraps at instead of the cap, and a German compound wider than the cap therefore widens its button rather than painting over the neighbour | | `RibbonMenu.svelte` | The dropdown panel; its look is global CSS, since its rows come from a caller's snippet | | `Icon.svelte`, `icons.ts` | Path data on a 16-unit canvas. `pinnedStroke(size)` holds the painted stroke at ~1.5px on large glyphs and ~1.1px on small ones, so 14px and 28px icons read as one family | | `menu.svelte.ts` | The one open-menu id, `anchored`, `pinPanels`, `clickOutside` | diff --git a/src/lib/components/ribbon/RibbonButton.svelte b/src/lib/components/ribbon/RibbonButton.svelte index 5b6b473..93b69f5 100644 --- a/src/lib/components/ribbon/RibbonButton.svelte +++ b/src/lib/components/ribbon/RibbonButton.svelte @@ -173,7 +173,10 @@ text-align: center; } - .rb-big .rb-label.hug { width: min-content; } + /* The cap can't wrap what has no space in it: a long compound painted past the + button and over its neighbour. A hugging label sets its own width instead — a + single word widens the button, as it does in Word's German ribbon. */ + .rb-big .rb-label.hug { width: min-content; max-width: none; } /* Split button: the two halves read as one control, so the hover outline sits on the wrapper and each half only tints its own surface. */