From ab7d8ddb01bf2227f0e6d3f1fc02c5d12472c330 Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Wed, 12 Aug 2026 13:40:12 +0200
Subject: [PATCH] fix: a page number that reads as a 1, and Word's stacked
 split button

The glyph was a stem on a base with no flag, so it read as a down-tack rather
than the digit it stands for.

A caret welded to the right of a big button floated at icon height, beside the
label instead of with it, on every menu button of the Layout tab. Big split
buttons stack now, as in Word: the icon runs the command, the label and its
caret open the menu. Measured: every label in a group still tops at 87px.
---
 src/lib/components/ribbon/RibbonButton.svelte | 24 +++++++++++++++----
 src/lib/components/ribbon/icons.ts            |  2 +-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/ribbon/RibbonButton.svelte b/src/lib/components/ribbon/RibbonButton.svelte
index 4726620..e93b525 100644
--- a/src/lib/components/ribbon/RibbonButton.svelte
+++ b/src/lib/components/ribbon/RibbonButton.svelte
@@ -36,7 +36,7 @@
   const ICON_SIZE = { big: 28, small: 14, icon: 20 } as const;
 </script>
 
-{#snippet face()}
+{#snippet face(withLabel = true)}
   <span class="rb-face">
     {#if content}{@render content()}
     {:else if icon}<Icon name={icon} size={ICON_SIZE[variant]} />{/if}
@@ -44,13 +44,14 @@
       <Icon name="chevronDown" size={10} />
     {/if}
   </span>
-  {#if label && variant !== 'icon'}<span class="rb-label">{label}</span>{/if}
+  {#if withLabel && label && variant !== 'icon'}<span class="rb-label">{label}</span>{/if}
 {/snippet}
 
 {#if caret && onCaret}
-  <span class="rb-split" class:rb-split-active={active || caretActive}>
+  {@const stacked = variant === 'big'}
+  <span class="rb-split" class:rb-split-col={stacked} class:rb-split-active={active || caretActive}>
     <button class="rb rb-{variant}" class:active {disabled} {title} {onclick}>
-      {@render face()}
+      {@render face(!stacked)}
     </button>
     <button
       class="rb-caret"
@@ -61,6 +62,7 @@
       aria-expanded={caretActive}
       onclick={onCaret}
     >
+      {#if stacked && label}<span class="rb-label">{label}</span>{/if}
       <Icon name="chevronDown" size={10} />
     </button>
   </span>
@@ -166,6 +168,20 @@
     cursor: pointer;
   }
 
+  /* A big split button stacks, as in Word: the icon runs the command, the label
+     and its caret open the menu. Welded to the right the caret would float at
+     icon height, beside the label rather than with it. */
+  .rb-split-col { flex-direction: column; }
+  .rb-split-col .rb-big { padding: 4px 7px 0; }
+
+  .rb-split-col .rb-caret {
+    width: auto;
+    gap: 3px;
+    padding: 4px 7px 6px;
+    border-radius: 0 0 3px 3px;
+    color: var(--w-text);
+  }
+
   .rb-caret:hover:not(:disabled) { background: var(--w-pressed); }
   .rb-caret:disabled { opacity: 0.4; cursor: default; }
   .rb-caret.active { background: var(--w-active); }
diff --git a/src/lib/components/ribbon/icons.ts b/src/lib/components/ribbon/icons.ts
index ef894ad..ee97929 100644
--- a/src/lib/components/ribbon/icons.ts
+++ b/src/lib/components/ribbon/icons.ts
@@ -95,7 +95,7 @@ export const STROKED = {
   crossRef: ['M2.5 3.5h6M2.5 6.5h4M2.5 9.5h5', 'M8.5 12.5h5M11 10l2.5 2.5L11 15'],
   header: ['M2 2.5h12v3H2z', 'M2 8h12M2 11h8'],
   footer: ['M2 10.5h12v3H2z', 'M2 5h12M2 8h8'],
-  pageNumber: ['M3.25 1.75h9.5v12.5h-9.5z', 'M6.75 10.5h2.5', 'M8 5.5v5'],
+  pageNumber: ['M3.25 1.75h9.5v12.5h-9.5z', 'M6.9 6.4 8 5.3v5.2', 'M6.75 10.5h2.5'],
   formula: ['M9 3.5h4', 'M9.5 8h3', 'M2.5 13.5c1.6 0 2-.9 2.4-2.4L7.2 3.4C7.5 2.3 8 2 8.8 2', 'M2.5 6.5h4'],
   pageBreak: ['M2 4.5h12M2 11.5h12', 'M8 6.5v3', 'M6.4 8.2 8 9.8l1.6-1.6'],
 } as const;