From 453d9e69b64e4d5d3d55abd6aaee39ef0db50141 Mon Sep 17 00:00:00 2001
From: Besser Sehen Landshut <hallo@bessersehen.la>
Date: Mon, 24 Aug 2026 05:32:00 +0200
Subject: [PATCH] fix(template): stop rendering the sort dropdown in its opened
 state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

sort-btns.html carries the DOM of an opened dropdown: \`class="show"\` on the
group, the toggle and the menu, \`aria-expanded="true"\`, and the inline
coordinates Popper had written when that markup was captured.

Without the interface — which is exactly the situation the template exists for
— the menu therefore stands open on top of the page, and assistive technology
is told a collapsed control is expanded.

The same file also holds a captured React identifier,
\`id="react-aria8245013726-:r5:"\`, referenced by an \`aria-labelledby\`. It is
replaced by a stable name.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 ui/template/sort-btns.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/template/sort-btns.html b/ui/template/sort-btns.html
index 1db002dde..0852750db 100644
--- a/ui/template/sort-btns.html
+++ b/ui/template/sort-btns.html
@@ -35,19 +35,19 @@
   <a role="button" tabindex="0" href="?order=frequent" class="text-capitalize fit-content d-none d-md-block btn btn-outline-secondary" style="border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem;">
     {{translator ($.language) "ui.question.frequent" }}
   </a>
-  <div role="group" class="show dropdown btn-group">
-    <button type="button" aria-expanded="true" class="dropdown-toggle show btn btn-outline-secondary btn-sm">
+  <div role="group" class="dropdown btn-group">
+    <button type="button" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm">
       {{translator ($.language) "ui.btns.more" }}
     </button>
-    <div x-placement="bottom-start" class="dropdown-menu show" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; transform: translate(0px, 33px);">
+    <div class="dropdown-menu">
       <a href="?order=score" aria-selected="false" class="text-capitalize dropdown-item"> {{translator ($.language) "ui.question.score" }}</a>
     </div>
   </div>
 </div>
 
 <div class="dropdown">
-  <button type="button" id="react-aria8245013726-:r5:" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm"><i class="br bi-view-stacked"></i></button>
-  <div x-placement="bottom-end" aria-labelledby="react-aria8245013726-:r5:" class="dropdown-menu dropdown-menu-end" data-popper-reference-hidden="false" data-popper-escaped="false" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; transform: translate(0px, 33px);">
+  <button type="button" id="question-layout-toggle" aria-expanded="false" class="dropdown-toggle btn btn-outline-secondary btn-sm"><i class="br bi-view-stacked"></i></button>
+  <div aria-labelledby="question-layout-toggle" class="dropdown-menu dropdown-menu-end">
     <h6 class="dropdown-header" role="heading">
       {{translator ($.language) "ui.btns.view" }}
     </h6>