From ee99b3641fe7d49debc118f2839dbc481e9996d1 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Fri, 23 Oct 2026 21:23:06 +0800
Subject: [PATCH] fix(ui): Hide the focus outline around dropdown popups

The global :focus-visible rule loads after the module CSS and has the same
specificity, so it overrode `outline: none` on the focused listbox wrapper
and drew a square blue frame inside the Select popup.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
---
 src/ui/Popup.module.css  | 4 +++-
 src/ui/Select.module.css | 5 ++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/ui/Popup.module.css b/src/ui/Popup.module.css
index 4b26708f..d88ffd5d 100644
--- a/src/ui/Popup.module.css
+++ b/src/ui/Popup.module.css
@@ -1,9 +1,11 @@
 .popup {
   z-index: var(--z-popup);
-  outline: none;
   overflow: auto;
   opacity: 0;
 }
+.popup:focus-visible {
+  outline: none;
+}
 .popup[data-positioned] {
   opacity: 1;
   animation: popIn var(--dur-fast) var(--ease);
diff --git a/src/ui/Select.module.css b/src/ui/Select.module.css
index b4cf24e7..af3badc5 100644
--- a/src/ui/Select.module.css
+++ b/src/ui/Select.module.css
@@ -57,10 +57,13 @@
   overflow: hidden;
 }
 .popupInner {
-  outline: none;
   display: flex;
   flex-direction: column;
 }
+/* Focus only carries keystrokes; the active row is the indicator. */
+.popupInner:focus-visible {
+  outline: none;
+}
 .list {
   max-height: 320px;
 }