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

@@ -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>
+  <div class="decor" aria-hidden="true">
-  <img src={filamentBanner} alt="" aria-hidden="true" class="banner" />
+    <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);