From 5d725650ebd2768f933b7205884651881fcb2551 Mon Sep 17 00:00:00 2001
From: imneov <i@imneov.im>
Date: Mon, 12 Oct 2026 20:43:38 -0700
Subject: [PATCH] fix(web): keep the ring border on focused overlays
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The site-wide "no focus ring" rule zeroes --tw-ring-shadow on any focused
element. Card was excluded for this in September, because its ring-1 is the
border, not a focus ring. Overlay shells are the same case and were missed:
menus, popovers, selects, comboboxes and dialogs have no border — bg-popover
plus ring-1 is their edge — and Base UI hands focus to the shell when it opens
(dropdown-menu-content carries tabindex="-1"). The edge vanished the moment
they opened, leaving a white panel on the white page with only a faint shadow:
the top-bar avatar menu looked like a line of text floating under the header.

Excluding container surfaces by their naming convention (data-slot ending in
-content) keeps the decision in one place and stops the next overlay from
regressing the same way. Form controls still lose the focus ring.
---
 CHANGELOG.md                    |  3 +++
 web/packages/ui/styles/base.css | 11 ++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 282ce66..69be14c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,9 @@ chart's `appVersion`; the image and chart are released together under it.
 
 ## [Unreleased]
 
+### Fixed
+- Overlay panels keep their edge. The site-wide "no focus ring" rule zeroed the `ring-1` that draws the border of menus, popovers, selects, comboboxes and dialogs, so an open white panel on the white page showed only a faint shadow — the top-bar avatar menu read as a line of text floating under the header.
+
 ## [0.1.2] - 2026-10-08
 
 ### Added
diff --git a/web/packages/ui/styles/base.css b/web/packages/ui/styles/base.css
index f612299..6afc523 100644
--- a/web/packages/ui/styles/base.css
+++ b/web/packages/ui/styles/base.css
@@ -78,8 +78,17 @@
 /*
   Card 的「边框」是 ring-1 画的（shadcn 新版 Card 没有 border）。整块可点的卡片
   （模型库、卡片 Demo：role="button" + tabIndex）点一下就聚焦，这条规则一把 ring 归零，
+  卡片的边框跟着消失 —— 它不是聚焦环，是结构线，排除掉。
+
+  浮层外壳同理，而且漏了同一类：菜单 / Popover / Select / Combobox / 对话框都是
+  `bg-popover + ring-1`、没有 border，Base UI 打开时又把焦点交给外壳
+  （dropdown-menu-content 带 tabindex="-1"）—— 打开即掉描边，白底浮层落在白底页面上
+  只剩一层几乎看不见的 shadow（2026-10-12 右上角头像菜单：那行「admin · 管理员」
+  像凭空飘在页面上）。按容器面的命名约定整类豁免，新加浮层不会再漏。
 */
-:where(:focus-visible, :focus, [data-focused], [aria-invalid='true']):where(:not([data-slot='card'])) {
+:where(:focus-visible, :focus, [data-focused], [aria-invalid='true']):where(
+  :not([data-slot='card']):not([data-slot$='-content'])
+) {
   --tw-ring-shadow: 0 0 #0000;
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-inset-ring-shadow: 0 0 #0000;