From 7b1db67796f7c6869fc07b2bdf99aca4ef342bf6 Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Tue, 21 Jul 2026 16:17:48 +0100
Subject: [PATCH 1/2] Fix info panel tablist

---
 accessibility/keyboardui.js |  2 +-
 index.html                  | 11 ++++++-----
 style.css                   |  6 ++++--
 tests/keyboardui.test.js    |  3 ++-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/accessibility/keyboardui.js b/accessibility/keyboardui.js
index fd430ba5..ada5170c 100644
--- a/accessibility/keyboardui.js
+++ b/accessibility/keyboardui.js
@@ -666,7 +666,7 @@ const InfoPanel = {
 
   init() {
     this._el = document.getElementById('info-panel');
-    this._tablist = document.getElementById('info-panel-tabs');
+    this._tablist = document.getElementById('info-panel-tablist');
     this._body = document.getElementById('info-panel-body');
   },
 
diff --git a/index.html b/index.html
index 6bb19bb5..60a729df 100644
--- a/index.html
+++ b/index.html
@@ -1323,11 +1323,12 @@ <h2 id="modal-title" data-i18n="about_heading">
               aria-label="Information panel"
             >
               <div id="info-panel-body"></div>
-              <div
-                id="info-panel-tabs"
-                role="tablist"
-                aria-label="Information panel tabs"
-              >
+              <div id="info-panel-tabs">
+                <div
+                  id="info-panel-tablist"
+                  role="tablist"
+                  aria-label="Information panel tabs"
+                ></div>
                 <div id="flocklink">
                   <a
                     href="https://flockxr.com/"
diff --git a/style.css b/style.css
index 67a02ac0..58ff1c7b 100644
--- a/style.css
+++ b/style.css
@@ -2299,8 +2299,10 @@ kbd {
   box-sizing: border-box;
 }
 
-#info-panel-tabs #flocklink {
-  order: 999;
+#info-panel-tablist {
+  display: flex;
+  align-items: center;
+  min-width: 0;
 }
 
 #info-panel-body {
diff --git a/tests/keyboardui.test.js b/tests/keyboardui.test.js
index ec988a52..ba353f66 100644
--- a/tests/keyboardui.test.js
+++ b/tests/keyboardui.test.js
@@ -267,7 +267,8 @@ export function runKeyboardUiTests(flock) {
         // and initialize them here, the same way main.js's bootstrap does.
         panelRoot = document.createElement('div');
         panelRoot.innerHTML =
-          '<div id="info-panel"><div id="info-panel-tabs" role="tablist"></div>' +
+          '<div id="info-panel"><div id="info-panel-tabs">' +
+          '<div id="info-panel-tablist" role="tablist"></div></div>' +
           '<div id="info-panel-body"></div></div>';
         document.body.appendChild(panelRoot);
         InfoPanel.init();

From 061129b74043cb00968407be8acf44a504fcc266 Mon Sep 17 00:00:00 2001
From: Laura Sach <5183697+lawsie@users.noreply.github.com>
Date: Tue, 21 Jul 2026 16:34:39 +0100
Subject: [PATCH 2/2] Remove wrong test

---
 tests/keyboardui.test.js | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/tests/keyboardui.test.js b/tests/keyboardui.test.js
index ba353f66..c563fb48 100644
--- a/tests/keyboardui.test.js
+++ b/tests/keyboardui.test.js
@@ -236,14 +236,6 @@ export function runKeyboardUiTests(flock) {
           expect(area5.selector).to.equal('#viewToggle');
         });
 
-        it('keeps area 5 as the info panel tabs when #info-panel-tabs is on screen', function () {
-          const el = document.createElement('div');
-          el.id = 'info-panel-tabs';
-          document.body.appendChild(el);
-          const area5 = AreaManager.effectiveAreas.find((a) => a.label === '5');
-          expect(area5.selector).to.equal('#info-panel-tabs');
-        });
-
         it('swaps area 9 for the reload button when one is connected to the DOM', function () {
           const reload = document.createElement('button');
           reload.id = 'reload-btn';