fix(ui): pin navbar mega panels to viewport

bun.lock

@@ -688,7 +688,7 @@
     },
     "packages/ui": {
       "name": "@wrnexus/ui",
-      "version": "0.8.30",
+      "version": "0.8.31",
       "dependencies": {
         "@wrnexus/core": "workspace:*",
       },

docs/ui-visual-contract-0.8.json

@@ -60,7 +60,7 @@
     "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5",
     "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
     "packages/ui/components/Nav.wrn": "c45b0ecb42250f4b3ede33c8932a025f789dda9ef48dbf332459ae458163e69a",
-    "packages/ui/components/Navbar.wrn": "cf956970f9b239d0cd2ff1e74554e07c74712a3514b2aa427352a73e5db02882",
+    "packages/ui/components/Navbar.wrn": "f80c8799a6e0b751c85b8c0ec611c84a694ad4a0d0e2223e5a46afe250904e42",
     "packages/ui/components/PageHeader.wrn": "321cde36ce8d521a57901033d46e8b437f42e558cca27f49ca26f7172aff1d54",
     "packages/ui/components/Pagination.wrn": "d54226705d4556f76ee5f0d6ae82d101ca6d006397756d547a9aa5954415ba39",
     "packages/ui/components/PinInput.wrn": "4dc398456f6392d7925db941debb484c7cb0358ecef527f696fe5ec4800a7602",

packages/ui/components/Navbar.wrn

@@ -419,6 +419,15 @@ size: string = "default"
       font-weight: 500;
     }
 
+    .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
+      position: fixed;
+      top: calc(var(--wrn-navbar-floating-start, 0px) + 4.25rem);
+      right: 1rem;
+      left: 1rem;
+      width: auto;
+      max-width: none;
+    }
+
     .wrn-navbar__menu-link,
     .wrn-navbar__dropdown > summary,
     .wrn-navbar__action {
@@ -720,6 +729,12 @@ size: string = "default"
         overflow: hidden;
         animation: wrn-navbar-mobile-panel 180ms ease both;
       }
+    .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel {
+        position: static;
+        width: 100%;
+        max-width: 100%;
+        margin-top: 0.25rem;
+      }
     .wrn-navbar__dropdown:not([open]) > .wrn-navbar__panel,
       .wrn-navbar__dropdown[open] > .wrn-navbar__panel {
         transform: none;
@@ -760,6 +775,7 @@ size: string = "default"
       .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__menu-link, .wrn-navbar__dropdown > summary, .wrn-navbar__action) { width: 100%; }
       .wrn-navbar[data-collapse-at="1100px"] :is(.wrn-navbar__mega, .wrn-navbar__mega .wrn-mega__trigger) { width: 100%; }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__panel { position: static; width: 100%; max-width: none; transform: none; }
+      .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__mega[data-full-width="true"] .wrn-mega__panel { position: static; width: 100%; max-width: 100%; margin-top: 0.25rem; }
     }
 
     @media (max-width: 600px) {

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrnexus/ui",
-  "version": "0.8.30",
+  "version": "0.8.31",
   "private": true,
   "type": "module",
   "main": "src/index.ts",

packages/ui/test/ui.test.ts

@@ -3133,6 +3133,13 @@ test("mega menu keeps hover activation and click activation from cancelling each
   expect(source).toContain("max-height: calc(100dvh - 5.5rem)");
 });
 
+test("navbar pins full-width mega panels to desktop viewport gutters", () => {
+  const source = readFileSync(uiComponentPath("Navbar"), "utf8");
+  expect(source).toMatch(/\.wrn-navbar__mega\[data-full-width="true"\] \.wrn-mega__panel \{[^}]*position: fixed/s);
+  expect(source).toMatch(/right: 1rem;\s+left: 1rem;/s);
+  expect(source).toMatch(/data-collapse-at="1100px"[^}]+\.wrn-navbar__mega\[data-full-width="true"\][^}]+position: static/s);
+});
+
 test("stepper shows only the active step content and offers back, next and skip", async () => {
   const source = readFileSync(uiComponentPath("Stepper"), "utf8");
   const html = await renderComponent(source, {