From 5e3aab30a297835adc5964cb4835eee79cfbdc91 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 4 Aug 2026 03:11:02 -0400
Subject: [PATCH] =?UTF-8?q?fix(aiui):=20header=20overlay=20panels=20get=20?=
 =?UTF-8?q?readable=20opacity=20=E2=80=94=20scoped,=20not=20blanket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Operator-reported: the model-picker and conversation-menu overlays are hard to
read over busy chat content at path-glass-card's shared rgba(0,0,0,0.65).
Scoped .header-overlay-panel (0.88) in ChatHeader.vue only — path-glass-card
itself is untouched, so BookDetail/ArticleDetail/TVSeriesDetail/WebsiteDetail/
ContentPanel/ChatWindow keep their existing glass. Unlayered scoped rule beats
the @layer components class without !important, and reaches the panels through
their Teleport to body.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../app/src/components/chat/ChatHeader.vue    | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/aiui/packages/app/src/components/chat/ChatHeader.vue b/aiui/packages/app/src/components/chat/ChatHeader.vue
index fae9ca16..c03152aa 100644
--- a/aiui/packages/app/src/components/chat/ChatHeader.vue
+++ b/aiui/packages/app/src/components/chat/ChatHeader.vue
@@ -119,7 +119,7 @@
       <Transition name="picker">
         <div
           v-if="showModelPicker"
-          class="fixed z-[9999] path-glass-card p-3 space-y-3 animate-fade-up-fast shadow-2xl min-w-[220px]"
+          class="fixed z-[9999] path-glass-card header-overlay-panel p-3 space-y-3 animate-fade-up-fast shadow-2xl min-w-[220px]"
           :style="modelPickerDropdownStyle"
           @click.stop
         >
@@ -180,7 +180,7 @@
       <Transition name="picker">
         <div
           v-if="showMenu"
-          class="fixed z-[9999] path-glass-card p-2 animate-fade-up-fast shadow-2xl min-w-[160px]"
+          class="fixed z-[9999] path-glass-card header-overlay-panel p-2 animate-fade-up-fast shadow-2xl min-w-[160px]"
           :style="menuDropdownStyle"
           @click.stop
         >
@@ -398,6 +398,25 @@ async function handleImportFile(e: Event) {
 </script>
 
 <style scoped>
+/* The two overlays this header opens — the model picker and the conversation
+ * menu — float over live chat content, so the shared `path-glass-card`
+ * translucency (rgba(0,0,0,0.65)) leaves their text hard to read against a
+ * busy backdrop. Operator-reported 2026-08-04.
+ *
+ * Deliberately scoped to this component rather than changing `.path-glass-card`
+ * itself: that class is also used by BookDetail, ArticleDetail, TVSeriesDetail,
+ * WebsiteDetail, ContentPanel, ChatWindow and every ChatPage panel, none of
+ * which have this problem. Only these two get the extra opacity.
+ *
+ * Scoped styles reach these nodes even though they are inside <Teleport to="body">
+ * (Vue stamps the scope attribute on the element itself), and this rule is
+ * unlayered while `.path-glass-card` lives in `@layer components` — unlayered
+ * wins over layered regardless of specificity, so no !important is needed.
+ */
+.header-overlay-panel {
+  background: rgba(0, 0, 0, 0.88);
+}
+
 .picker-enter-active {
   transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }