fix: a long ribbon label widens its button instead of overpainting

The 78px cap cannot wrap a word without a space in it, so a German compound
painted past the button and across its neighbour. A hugging label drops the
cap and sets its own width.

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` |

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. */