From 1ccc7b5e15f693366d972b6362778cc78748cf44 Mon Sep 17 00:00:00 2001
From: BoulderBadgeDad <batmanesignal@gmail.com>
Date: Thu, 18 Jun 2026 16:57:24 -0700
Subject: [PATCH] =?UTF-8?q?#889:=20fix=20re-identify=20modal=20header=20?=
 =?UTF-8?q?=E2=80=94=20clip=20the=20blurred=20bg=20in=20its=20own=20layer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hero's overflow:hidden was clipping the header content, but removing it let the
blurred background + overlay cover (and steal clicks from) the source tabs below.
Move the decoration into .reid-hero-decor — an absolutely-positioned clip layer
that contains the blur and is pointer-events:none — so the header content (a sibling,
never clipped) shows in full AND the tabs stay clickable.
---
 webui/index.html       |  6 ++++--
 webui/static/style.css | 19 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/webui/index.html b/webui/index.html
index 6db10878..b682f8aa 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -7747,8 +7747,10 @@
     <div class="modal-overlay hidden" id="reid-modal-overlay" onclick="if(event.target===this)closeReidentifyModal()">
         <div class="reid-modal" id="reid-modal">
             <div class="reid-hero">
-                <div class="reid-hero-bg" id="reid-hero-bg"></div>
-                <div class="reid-hero-overlay"></div>
+                <div class="reid-hero-decor">
+                    <div class="reid-hero-bg" id="reid-hero-bg"></div>
+                    <div class="reid-hero-overlay"></div>
+                </div>
                 <span class="reid-close" onclick="closeReidentifyModal()">&times;</span>
                 <div class="reid-hero-content">
                     <div class="reid-hero-art" id="reid-hero-art"></div>
diff --git a/webui/static/style.css b/webui/static/style.css
index d021b9d2..8d679da8 100644
--- a/webui/static/style.css
+++ b/webui/static/style.css
@@ -68386,17 +68386,28 @@ body.app-locked > *:not(#launch-pin-overlay):not(#login-overlay):not(script):not
     to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 
-/* ── Hero ── */
-.reid-hero { position: relative; padding: 26px 28px; overflow: hidden; }
+/* ── Hero ──
+   No overflow:hidden on .reid-hero itself (it was clipping the header content).
+   Instead the decorative blurred bg + overlay live in .reid-hero-decor, an
+   absolutely-positioned clip layer: it contains the blur (so it can't bleed into
+   the tabs) and is pointer-events:none (so it can never steal clicks from the
+   source tabs). The actual content is a SIBLING of the decor layer, so it's never
+   clipped. */
+.reid-hero { position: relative; padding: 26px 28px; }
+.reid-hero-decor {
+    position: absolute; inset: 0; z-index: 0;
+    overflow: hidden; pointer-events: none;
+    border-radius: 20px 20px 0 0;
+}
 .reid-hero-bg {
     position: absolute; inset: -30px;
     background-size: cover; background-position: center;
     filter: blur(46px) brightness(0.4) saturate(1.5);
-    transform: scale(1.25); z-index: 0; opacity: 0.9;
+    transform: scale(1.25); opacity: 0.9;
     transition: background-image 0.4s ease;
 }
 .reid-hero-overlay {
-    position: absolute; inset: 0; z-index: 1;
+    position: absolute; inset: 0;
     background: linear-gradient(135deg, rgba(10,11,16,0.55) 0%, rgba(10,11,16,0.8) 100%);
 }
 .reid-hero-content { position: relative; z-index: 2; display: flex; gap: 18px; align-items: center; }