fix(ui): pin navbar mega panels to viewport

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, {