From 57d91dc8dc9bf0d90d42c53d65868a0049f8531a Mon Sep 17 00:00:00 2001
From: ruv <ruv@ruv.net>
Date: Mon, 27 Apr 2026 13:58:47 -0400
Subject: [PATCH] =?UTF-8?q?fix(dashboard):=20settings=20drawer=20scrim=20?=
 =?UTF-8?q?=E2=80=94=20escape=20host=20transform's=20containing-block=20tr?=
 =?UTF-8?q?ap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The drawer's :host had transform: translateX(...) which makes it the
containing block for any fixed-position descendants. The .scrim at
'position: fixed; inset: 0' therefore covered only the drawer's own
420 px panel area, not the viewport. Visible symptoms:

- Page behind the drawer didn't dim
- Click outside the drawer didn't dismiss it (no scrim to receive)
- Felt like the drawer wasn't really 'modal'

Fix: keep :host as a fixed full-viewport overlay (no transform),
move the drawer body into an inner .panel div, transform only that.
Now the scrim covers the viewport correctly and outside-clicks dismiss.

Same trap exists nowhere else; nv-modal already follows this pattern.

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../src/components/nv-settings-drawer.ts      | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/dashboard/src/components/nv-settings-drawer.ts b/dashboard/src/components/nv-settings-drawer.ts
index 3efd907a..92544147 100644
--- a/dashboard/src/components/nv-settings-drawer.ts
+++ b/dashboard/src/components/nv-settings-drawer.ts
@@ -9,26 +9,35 @@ export class NvSettingsDrawer extends LitElement {
   @state() private open = false;
 
   static styles = css`
+    /* The host covers the viewport without transforming itself. Only the
+     * inner .panel is transformed; otherwise the host's transform would
+     * create a containing block for the fixed-position scrim, clipping
+     * it to the panel's 420 px width and breaking outside-to-dismiss. */
     :host {
-      position: fixed; top: 0; right: 0; bottom: 0;
+      position: fixed; inset: 0;
+      z-index: 51;
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 0.2s;
+    }
+    :host([open]) { pointer-events: auto; opacity: 1; }
+    .scrim {
+      position: absolute; inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(2px);
+    }
+    .panel {
+      position: absolute;
+      top: 0; right: 0; bottom: 0;
       width: 420px; max-width: 100vw;
       background: var(--bg-1);
       border-left: 1px solid var(--line);
-      z-index: 51;
       transform: translateX(100%);
       transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
       display: flex; flex-direction: column;
-      box-shadow: -20px 0 60px -20px rgba(0,0,0,0.5);
+      box-shadow: -20px 0 60px -20px rgba(0, 0, 0, 0.5);
     }
-    :host([open]) { transform: translateX(0); }
-    .scrim {
-      position: fixed; inset: 0;
-      background: rgba(0,0,0,0.5);
-      z-index: 50;
-      opacity: 0; pointer-events: none;
-      transition: opacity 0.2s;
-    }
-    :host([open]) .scrim { opacity: 1; pointer-events: auto; }
+    :host([open]) .panel { transform: translateX(0); }
     .h {
       padding: 14px 16px;
       border-bottom: 1px solid var(--line);
@@ -123,6 +132,7 @@ export class NvSettingsDrawer extends LitElement {
   override render() {
     return html`
       <div class="scrim" @click=${() => this.close()}></div>
+      <div class="panel" role="dialog" aria-modal="true" aria-label="Settings">
       <div class="h">
         <div class="ttl">Settings</div>
         <button class="close" @click=${() => this.close()}>×</button>
@@ -256,6 +266,7 @@ export class NvSettingsDrawer extends LitElement {
           </div>
         </div>
       </div>
+      </div>
     `;
   }
 }