diff --git a/src/lib/components/ShapePicker.svelte b/src/lib/components/ShapePicker.svelte
index 007cfbb..e6a4a45 100644
--- a/src/lib/components/ShapePicker.svelte
+++ b/src/lib/components/ShapePicker.svelte
@@ -14,6 +14,19 @@
   const KINDS = Object.keys(SHAPES) as ShapeKind[];
   let open = $state(false);
   let host = $state<HTMLElement | null>(null);
+  let btn = $state<HTMLElement | null>(null);
+  // The ribbon band clips its overflow and the floating box toolbar stacks above it,
+  // so the menu is placed from the button's rect and shown in the top layer.
+  let pos = $state({ top: 0, left: 0 });
+  const topLayer = (node: HTMLElement) => node.showPopover();
+
+  function place() {
+    const r = btn?.getBoundingClientRect();
+    if (!r) return;
+    const band = host?.closest('.ribbon-body')?.getBoundingClientRect();
+    const left = Math.min(r.left, window.innerWidth - 220);
+    pos = { top: Math.max(r.bottom, band?.bottom ?? 0) + 4, left: Math.max(8, left) };
+  }
 
   const label = (k: ShapeKind) => t().textBox.shapes[k];
 
@@ -32,14 +45,17 @@
     aria-label={t().textBox.chooseShape}
     aria-haspopup="true"
     aria-expanded={open}
-    onclick={() => (open = !open)}
+    bind:this={btn}
+    onclick={() => { open = !open; if (open) place(); }}
   >
     {@render tile(value)}
-    <span class="chevron" aria-hidden="true">▾</span>
+    <svg class="chevron" width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
+      <path d="M1 2.5l3 3 3-3" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
   </button>
 
   {#if open}
-    <div class="shape-menu" role="menu">
+    <div class="shape-menu" role="menu" popover="manual" use:topLayer style="top: {pos.top}px; left: {pos.left}px">
       {#each KINDS as k}
         <button
           class="shape-tile"
@@ -93,15 +109,16 @@
     cursor: pointer;
   }
   .shape-btn:hover { background: var(--w-hover, rgba(0, 0, 0, 0.08)); }
-  .shape-btn svg { width: 22px; height: 22px; }
-  .shape-btn.compact svg { width: 18px; height: 18px; }
-  .chevron { font-size: 9px; line-height: 1; }
+  /* Kept below the ribbon's own 28px rule for a captioned picker, so the tile grows
+     there and stays compact in the floating toolbar. */
+  :where(.shape-btn) svg:first-of-type { width: 22px; height: 22px; }
+  :where(.shape-btn.compact) svg:first-of-type { width: 18px; height: 18px; }
+  .chevron { width: 8px; height: 8px; flex: none; }
 
   .shape-menu {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 0;
-    z-index: 60;
+    position: fixed;
+    inset: auto;
+    margin: 0;
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 2px;
diff --git a/src/lib/components/ribbon/tabs/FrameTabs.svelte b/src/lib/components/ribbon/tabs/FrameTabs.svelte
index b36c87b..9256e83 100644
--- a/src/lib/components/ribbon/tabs/FrameTabs.svelte
+++ b/src/lib/components/ribbon/tabs/FrameTabs.svelte
@@ -170,6 +170,7 @@
   .field {
     display: flex;
     align-items: center;
+    align-self: center;
     gap: 6px;
     color: var(--w-text-dim);
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index 110f2ad..ed1928d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -469,7 +469,7 @@
   padding: 2px 6px 3px;
   border-radius: 4px;
   cursor: pointer;
-  --toolbar-btn-size: 28px;
+  --toolbar-btn-size: 32px;
 }
 
 /* Mirrors .rb-big's box, down to the slot it holds open for a caret, so a picker
@@ -479,7 +479,7 @@
    baseline and carry the descender gap with it. */
 .rb-captioned > * { display: flex; }
 
-.rb-captioned :is(.table-trigger, .char-trigger, .dt-trigger, .tsp-trigger, .bp-trigger, .lang-picker) {
+.rb-captioned :is(.table-trigger, .char-trigger, .dt-trigger, .tsp-trigger, .bp-trigger, .lang-picker, .shape-btn) {
   height: 32px;
   min-height: 32px;
   padding: 0;