refactor(ui): compact mega menu layouts

bun.lock

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

docs/ui-visual-contract-0.8.json

@@ -55,12 +55,12 @@
     "packages/ui/components/Map.wrn": "3e6d5de5a21dd050c5c65950d6fb2f89af4024e1856a48f055b65b88fcd7b890",
     "packages/ui/components/MarketingSectionHeader.wrn": "39b79499b77dc1c7d34e4e5ecb45a9ddc6182f78c2a2586671c4fa07f44679ad",
     "packages/ui/components/Marquee.wrn": "81cd80732be34c8d7e4bf28b00347e1a9273166afdf66589d9f5d5774b69403b",
-    "packages/ui/components/MegaMenu.wrn": "1726a935b963b4a7ad9420b24e1ba6ad6de979709fa552e4717fb67e79c4de42",
+    "packages/ui/components/MegaMenu.wrn": "b8bbe7456645c66481fdc65929d85fc4fb4386f71e844f2cb593e9f7685e6180",
     "packages/ui/components/MetricCard.wrn": "513a6e99be3d9db46d96af9942b51331a0a048b184603e77e814506f0a52bdc5",
     "packages/ui/components/MetricGrid.wrn": "1fcebf51dcbe8520fe16bda904c1ef206c25c3900438d53877492c64ea21a1a5",
     "packages/ui/components/Modal.wrn": "7fa4b877772736f29f690e24d8742922b310397ef3083f0b78acb67a9f0d14b2",
     "packages/ui/components/Nav.wrn": "c45b0ecb42250f4b3ede33c8932a025f789dda9ef48dbf332459ae458163e69a",
-    "packages/ui/components/Navbar.wrn": "73c1212b14fc20e53dfecc9eddf9e121c4d9c56d00f1ef3599be8bc1ef0281c2",
+    "packages/ui/components/Navbar.wrn": "a3cf984193e28c692894031417df74ebca66edeaa650c39e38b155aa54193075",
     "packages/ui/components/PageHeader.wrn": "321cde36ce8d521a57901033d46e8b437f42e558cca27f49ca26f7172aff1d54",
     "packages/ui/components/Pagination.wrn": "d54226705d4556f76ee5f0d6ae82d101ca6d006397756d547a9aa5954415ba39",
     "packages/ui/components/PinInput.wrn": "4dc398456f6392d7925db941debb484c7cb0358ecef527f696fe5ec4800a7602",

packages/ui/components/MegaMenu.wrn

@@ -358,6 +358,7 @@ component MegaMenu {
     }
 
     .wrn-mega__panel {
+      box-sizing: border-box;
       position: absolute;
       z-index: 1200;
       top: calc(100% + 0.4rem);
@@ -386,6 +387,20 @@ component MegaMenu {
     .wrn-mega[data-panel-align="center"] .wrn-mega__panel { left: 50%; transform: translateX(-50%); }
     .wrn-mega[data-panel-align="end"] .wrn-mega__panel { right: 0; left: auto; }
 
+    .wrn-mega[data-variant="default"] .wrn-mega__panel {
+      width: max-content;
+      min-width: 15rem;
+      max-width: min(24rem, calc(100dvw - 2rem));
+      height: auto;
+    }
+    .wrn-mega[data-variant="default"] .wrn-mega__layout,
+    .wrn-mega[data-variant="default"] .wrn-mega__columns,
+    .wrn-mega[data-variant="default"][data-column-count] .wrn-mega__columns {
+      grid-template-columns: minmax(0, 1fr);
+    }
+    .wrn-mega[data-variant="default"] .wrn-mega__columns { overflow: visible; }
+    .wrn-mega[data-variant="default"] .wrn-mega__featured { width: auto; padding: 1rem 0 0; border-top: 1px solid var(--wrn-color-border); border-left: 0; }
+
     .wrn-mega__layout { display: grid; min-height: 0; max-height: calc(100dvh - 8rem); flex: 1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem; overflow: hidden; }
 
     .wrn-mega__columns {
@@ -461,14 +476,15 @@ component MegaMenu {
     .wrn-mega[data-variant="icon-grid"] .wrn-mega__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__panel { height: min(36rem, calc(100dvh - 6.5rem)); }
     .wrn-mega[data-variant="catalog"] .wrn-mega__layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); gap: 0; }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__rail { min-width: 0; padding: 0.5rem; gap: 0.15rem; border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail { min-width: 0; padding: 0.55rem; gap: 0.3rem; border-radius: calc(var(--wrn-radius-lg) - 0.25rem); }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { padding: 0.48rem 0.55rem; align-items: center; gap: 0.55rem; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link { min-height: 2.5rem; padding: 0.45rem 0.55rem; align-items: center; gap: 0.7rem; }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; line-height: 1.25; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link strong { font-size: 0.76rem; font-weight: 400; line-height: 1.25; }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; font-size: 0.9rem; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-link[data-active="true"] strong { font-weight: 600; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__rail-icon { width: 1.65rem; height: 1.65rem; flex: 0 0 1.65rem; color: var(--wrn-color-text); border-radius: 0.45rem; background: color-mix(in srgb, var(--wrn-color-text) 10%, transparent); font-size: 0.88rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__columns { padding: 0.35rem 0.5rem 0.75rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
     .wrn-mega[data-variant="catalog"] .wrn-mega__column { display: flex; min-height: 100%; flex-direction: column; }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__column-header { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-md); background: var(--wrn-color-surface-soft); }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__column-header { width: fit-content; min-width: min(18rem, 100%); margin: 0 0 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--wrn-color-border); border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-soft); }
-    .wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 1rem; letter-spacing: 0; text-transform: none; }
+    .wrn-mega[data-variant="catalog"] .wrn-mega__heading { margin: 0; color: var(--wrn-color-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__column-description { margin: 0.3rem 0 0; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem; }
     .wrn-mega[data-variant="catalog"] .wrn-mega__link { min-height: 3.25rem; padding: 0.7rem 0.8rem; align-items: center; border: 1px solid var(--wrn-color-border); background: color-mix(in srgb, var(--wrn-color-surface-soft) 55%, transparent); }
@@ -499,6 +515,8 @@ component MegaMenu {
       min-width: 0;
     }
 
+    .wrn-mega[data-variant="catalog"] .wrn-mega__link-icon { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; }
+
     .wrn-mega__link-label {
       font-size: 0.88rem;
       font-weight: 600;

packages/ui/components/Navbar.wrn

@@ -429,6 +429,16 @@ size: string = "default"
       max-width: none;
     }
 
+    .wrn-navbar__mega[data-variant="default"][data-full-width="true"] .wrn-mega__panel {
+      position: absolute;
+      top: calc(100% + 0.4rem);
+      right: auto;
+      left: 0;
+      width: max-content;
+      min-width: 15rem;
+      max-width: min(24rem, calc(100dvw - 2rem));
+    }
+
     .wrn-navbar__menu-link,
     .wrn-navbar__dropdown > summary,
     .wrn-navbar__action {

packages/ui/package.json

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

packages/ui/test/ui.test.ts

@@ -2937,6 +2937,8 @@ test("mega menu renders column groups in an anchored panel", async () => {
   // Single level by design: a mega panel shows breadth flat, so there is no
   // nested submenu markup to find.
   expect(source).not.toContain("wrn-mega__submenu");
+  expect(source).toContain('.wrn-mega[data-variant="default"] .wrn-mega__panel');
+  expect(source).toContain("box-sizing: border-box");
 });
 
 test("mega menu columns take roving focus and survive an empty column list", async () => {