From 09f6d6932f6b360cd89f42afe78029d74f16c596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kjell=20Rune=20Mons=C3=B8?= <kjell@apps.no>
Date: Thu, 30 Jul 2026 23:34:49 +0200
Subject: [PATCH] fix(docs): dim the page behind the open mobile section nav

The dropdown floated over undimmed content, unlike every dialog in the
product, and only closed by tapping the toggle or a link. A fixed scrim
under the panel restores the dashboard's dimming contract and closes on
a tap outside.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011HwhYb3yU3qnGjtFRodQxm
---
 .changeset/docs-mobile-nav-scrim.md           |  5 ++++
 .../docs-pages/src/_components/docs-side.tsx  |  1 +
 packages/docs-pages/src/docs.css              | 24 ++++++++++++++++++-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/docs-mobile-nav-scrim.md

diff --git a/.changeset/docs-mobile-nav-scrim.md b/.changeset/docs-mobile-nav-scrim.md
new file mode 100644
index 00000000..5a503c2e
--- /dev/null
+++ b/.changeset/docs-mobile-nav-scrim.md
@@ -0,0 +1,5 @@
+---
+'@getmunin/docs-pages': patch
+---
+
+Dim the page behind the open mobile section-nav dropdown in the developer portal, and close it on a tap outside — the panel previously floated over undimmed content, unlike every dialog in the product.
diff --git a/packages/docs-pages/src/_components/docs-side.tsx b/packages/docs-pages/src/_components/docs-side.tsx
index 5d34ee2f..a461e63a 100644
--- a/packages/docs-pages/src/_components/docs-side.tsx
+++ b/packages/docs-pages/src/_components/docs-side.tsx
@@ -25,6 +25,7 @@ export function DocsSide({ label, children }: { label: string; children: ReactNo
       <div className="docs-side-list" onClick={closeOnLink}>
         {children}
       </div>
+      <div className="docs-side-scrim" aria-hidden onClick={() => setOpen(false)} />
     </nav>
   );
 }
diff --git a/packages/docs-pages/src/docs.css b/packages/docs-pages/src/docs.css
index 05dbca56..2a221c69 100644
--- a/packages/docs-pages/src/docs.css
+++ b/packages/docs-pages/src/docs.css
@@ -318,7 +318,8 @@
 }
 
 /* Mobile section-nav toggle — hidden on desktop, the list shows inline. */
-.docs-side-toggle {
+.docs-side-toggle,
+.docs-side-scrim {
   display: none;
 }
 
@@ -1269,6 +1270,8 @@
   }
   .docs-side-toggle {
     display: flex;
+    position: relative;
+    z-index: 5;
     width: 100%;
     align-items: center;
     justify-content: space-between;
@@ -1307,6 +1310,25 @@
   .docs-side[data-open='true'] .docs-side-list {
     display: block;
   }
+  .docs-side-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 4;
+    background: rgb(0 0 0 / 0.4);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 200ms ease;
+  }
+  @media (prefers-color-scheme: dark) {
+    .docs-side-scrim {
+      background: rgb(0 0 0 / 0.7);
+    }
+  }
+  .docs-side[data-open='true'] .docs-side-scrim {
+    opacity: 1;
+    pointer-events: auto;
+  }
   .docs-main {
     padding: 24px 20px 80px;
   }