From 102f2c6cac124a01f22a27c723cbac7d646d17fd Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Thu, 13 Aug 2026 22:08:04 +0200
Subject: [PATCH] fix: the style gallery's menu drops under its own chevron
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel anchors to its parent, which was the gallery wrapper — a flex:1
strip whose right edge is the ribbon's, measured 745px from the button.
---
 .../ribbon/controls/StyleGallery.svelte       | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/lib/components/ribbon/controls/StyleGallery.svelte b/src/lib/components/ribbon/controls/StyleGallery.svelte
index f68ee19..4d2e97d 100644
--- a/src/lib/components/ribbon/controls/StyleGallery.svelte
+++ b/src/lib/components/ribbon/controls/StyleGallery.svelte
@@ -96,29 +96,33 @@
       </button>
     {/each}
   </div>
-  <button class="gallery-more" onclick={() => toggleMenu(ID)} title={t().toolbar.styles.title} aria-haspopup="menu" aria-expanded={isMenuOpen(ID)}>
-    <Icon name="chevronDown" size={10} />
-  </button>
-  {#if isMenuOpen(ID)}
-    <div class="ribbon-menu gallery-menu" use:anchored={'right'} role="menu">
-      <div class="menu-scroll">
-        <div class="rb-menu-label">{t().toolbar.styles.title}</div>
-        {#each paraStyles as s}
-          <button class:selected={current === s.name} style={tileStyle(s.name)} onclick={() => apply(s.name)}>
-            {label(s.name)}
-            {#if styleShortcut(s.name)}<span class="menu-key">{styleShortcut(s.name)}</span>{/if}
-          </button>
-        {/each}
-        {#if charStyles.length}
-          <div class="rb-menu-label">{t().styles.characterStyles}</div>
-          {#each charStyles as c}
-            <button class:selected={currentChar === c.name} style={tileStyle(c.name)} onclick={() => applyChar(c.name)}>{c.name}</button>
+  <!-- The panel anchors to its parent, so it hangs off this button rather than the
+       stretched wrapper — whose right edge is the ribbon's, a strip away. -->
+  <div class="gallery-more-wrap">
+    <button class="gallery-more" onclick={() => toggleMenu(ID)} title={t().toolbar.styles.title} aria-haspopup="menu" aria-expanded={isMenuOpen(ID)}>
+      <Icon name="chevronDown" size={10} />
+    </button>
+    {#if isMenuOpen(ID)}
+      <div class="ribbon-menu gallery-menu" use:anchored={'right'} role="menu">
+        <div class="menu-scroll">
+          <div class="rb-menu-label">{t().toolbar.styles.title}</div>
+          {#each paraStyles as s}
+            <button class:selected={current === s.name} style={tileStyle(s.name)} onclick={() => apply(s.name)}>
+              {label(s.name)}
+              {#if styleShortcut(s.name)}<span class="menu-key">{styleShortcut(s.name)}</span>{/if}
+            </button>
           {/each}
-        {/if}
+          {#if charStyles.length}
+            <div class="rb-menu-label">{t().styles.characterStyles}</div>
+            {#each charStyles as c}
+              <button class:selected={currentChar === c.name} style={tileStyle(c.name)} onclick={() => applyChar(c.name)}>{c.name}</button>
+            {/each}
+          {/if}
+        </div>
+        <button class="rb-menu-foot" onclick={() => { closeMenu(); onManageStyles?.('paragraph'); }}>{t().styles.manage}</button>
       </div>
-      <button class="rb-menu-foot" onclick={() => { closeMenu(); onManageStyles?.('paragraph'); }}>{t().styles.manage}</button>
-    </div>
-  {/if}
+    {/if}
+  </div>
 </div>
 
 <style>
@@ -191,6 +195,11 @@
     text-overflow: ellipsis;
   }
 
+  .gallery-more-wrap {
+    display: flex;
+    flex-shrink: 0;
+  }
+
   .gallery-more {
     flex-shrink: 0;
     width: 17px;