From 58686afe62d2f5f8437454c69dc571c17cfed9fa Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Tue, 21 Jul 2026 09:52:57 +0100
Subject: [PATCH 1/2] Relocate gizmo badges

---
 accessibility/keyboardui.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/accessibility/keyboardui.js b/accessibility/keyboardui.js
index a02c5a67..df4a0a16 100644
--- a/accessibility/keyboardui.js
+++ b/accessibility/keyboardui.js
@@ -358,14 +358,25 @@ const GizmoMenuManager = {
   renderBadges() {
     const container = document.getElementById('gizmo-menu-content');
     container.innerHTML = '';
-    this.buttons.forEach((entry) => {
-      const el = document.getElementById(entry.id);
-      if (!el || el.offsetParent === null) return;
-      const rect = el.getBoundingClientRect();
+    const visible = this.buttons
+      .map((entry) => {
+        const el = document.getElementById(entry.id);
+        if (!el || el.offsetParent === null) return null;
+        return { entry, rect: el.getBoundingClientRect() };
+      })
+      .filter(Boolean);
+    // When the buttons wrap into multiple rows (portrait), a below-button badge
+    // sits on top of the next row's buttons — so only the bottom row keeps its
+    // badge below; every row above it gets the badge placed above instead.
+    const bottomRowTop = Math.max(...visible.map(({ rect }) => rect.top));
+    visible.forEach(({ entry, rect }) => {
       const badge = document.createElement('div');
       badge.className = 'gizmo-key-badge';
       badge.innerText = entry.label;
-      badge.style.top = `${rect.top + rect.height + 8}px`;
+      const isBottomRow = rect.top >= bottomRowTop - rect.height / 2;
+      badge.style.top = isBottomRow
+        ? `${rect.top + rect.height + 8}px`
+        : `${rect.top - 8}px`;
       badge.style.left = `${rect.left + rect.width / 2}px`;
       container.appendChild(badge);
     });

From 997476edebc52e0cfb7a0b8e03a4fe137526386d Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Tue, 21 Jul 2026 10:16:17 +0100
Subject: [PATCH 2/2] Reformat comment

---
 accessibility/keyboardui.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/accessibility/keyboardui.js b/accessibility/keyboardui.js
index df4a0a16..fd430ba5 100644
--- a/accessibility/keyboardui.js
+++ b/accessibility/keyboardui.js
@@ -365,18 +365,14 @@ const GizmoMenuManager = {
         return { entry, rect: el.getBoundingClientRect() };
       })
       .filter(Boolean);
-    // When the buttons wrap into multiple rows (portrait), a below-button badge
-    // sits on top of the next row's buttons — so only the bottom row keeps its
-    // badge below; every row above it gets the badge placed above instead.
+    // If badges span two rows, put top row badges on top
     const bottomRowTop = Math.max(...visible.map(({ rect }) => rect.top));
     visible.forEach(({ entry, rect }) => {
       const badge = document.createElement('div');
       badge.className = 'gizmo-key-badge';
       badge.innerText = entry.label;
       const isBottomRow = rect.top >= bottomRowTop - rect.height / 2;
-      badge.style.top = isBottomRow
-        ? `${rect.top + rect.height + 8}px`
-        : `${rect.top - 8}px`;
+      badge.style.top = isBottomRow ? `${rect.top + rect.height + 8}px` : `${rect.top - 8}px`;
       badge.style.left = `${rect.left + rect.width / 2}px`;
       container.appendChild(badge);
     });