From 9390a7cbc0963962024abd84d419f0d2360f9e05 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 12 Oct 2026 03:45:25 +0000
Subject: [PATCH] Open the My world menu over the page

The header clipped everything to its own box, so the dropdown was cut off
below the nav line. Only the nebula and banner are clipped now, and the
header stacks above the page content.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
---
 packages/ui/src/components/SiteHeader.astro | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/SiteHeader.astro b/packages/ui/src/components/SiteHeader.astro
index 0b8abd0..0336874 100644
--- a/packages/ui/src/components/SiteHeader.astro
+++ b/packages/ui/src/components/SiteHeader.astro
@@ -24,8 +24,10 @@ const inWorld = world.some((w) => w.key === current);
 const aria = (key: NavKey) => (key === current ? "page" : undefined);
 ---
 <header class="gk-site-header">
-  <div class="nebula" aria-hidden="true"></div>
-  <img src={filamentBanner} alt="" aria-hidden="true" class="banner" />
+  <div class="decor" aria-hidden="true">
+    <div class="nebula"></div>
+    <img src={filamentBanner} alt="" class="banner" />
+  </div>
   {
     store ? (
       <nav aria-label="Store" class="nav">
@@ -88,17 +90,24 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
 </header>
 
 <style>
+  /* The header sits above the page so the My world menu opens over it; only
+     the nebula and banner are clipped to the header. */
   .gk-site-header {
     position: relative;
-    overflow: hidden;
+    z-index: 10;
     color: var(--gk-text);
     isolation: isolate;
   }
+  .decor {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
   .nebula {
     position: absolute;
     inset: 0;
-    z-index: -1;
-    pointer-events: none;
     background:
       radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
       radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%);
@@ -112,8 +121,6 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
     width: 900px;
     max-width: none;
     opacity: 0.22;
-    pointer-events: none;
-    z-index: -1;
   }
   .nav {
     max-width: var(--gk-page-max);