From 80af7570a213d470d3c4d6ca569fbcf33cab8fa7 Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Mon, 20 Apr 2026 05:40:54 +0800 Subject: [PATCH] fix(ui): banner z-index above shield icon so close button is clickable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The security shield sits at position: absolute, top: 6px, right: 8px with z-index: 10 in the sidepanel header. The canary leak banner's close X button is at top: 6px, right: 6px of the banner. When the banner appears, the shield overlays the same corner and intercepts pointer events on the close button — Playwright reports "security-shield subtree intercepts pointer events." Caught by the new sidepanel DOM test (security-sidepanel-dom.test.ts) clicking #security-banner-close. Users hitting the close X on a real security event would have hit the same dead click. Fix: bump .security-banner to z-index: 20 so its controls sit above the shield. Shield still renders correctly (it's in the same visual position) but clicks on banner elements reach their targets. Co-Authored-By: Claude Opus 4.7 (1M context) --- extension/sidepanel.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/extension/sidepanel.css b/extension/sidepanel.css index c490f4d2..7e9bbbce 100644 --- a/extension/sidepanel.css +++ b/extension/sidepanel.css @@ -129,6 +129,11 @@ .security-banner { position: relative; + /* Sit above the absolutely-positioned security-shield (z-index: 10) so + the banner's close button and controls receive clicks. Without this + the shield at top-right overlaps the banner's close X region and + intercepts pointer events. */ + z-index: 20; padding: 20px 16px; text-align: center; background: rgba(20, 20, 20, 0.98);