fix(ui): prevent navigation surface overflow

bun.lock

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

docs/ui-visual-contract-0.8.json

@@ -4,7 +4,7 @@
   "artifacts": {
     "packages/ui/components/Accordion.wrn": "09251f76a2f9385e97eb67e06c0cf868e1771ac5f420647221bec5160287034b",
     "packages/ui/components/AdvancedSelect.wrn": "b952b894a5b35050fc2f6e43c4182101eeee05c75662e2aca4abfe61512b305b",
-    "packages/ui/components/AnnouncementBar.wrn": "a44f9ecf2cfbda2bbb71a81a50a3666de9ba3f9d185bc28f0035d5eebc602fad",
+    "packages/ui/components/AnnouncementBar.wrn": "5b3219db555e0fcdb94ec41dc18186ee1b7c0cf9c260469f7fb1fc43435c28c4",
     "packages/ui/components/AuthForm.wrn": "46a3e1db1c9e69efc52473cbf2fababdcbfe7144e7571469638d2c3addd4d7f0",
     "packages/ui/components/AuthSplitLayout.wrn": "724938921bc38cc5a0422de69c237b630f099f2df94c66977362b048e4a420a5",
     "packages/ui/components/AvatarGroup.wrn": "30b702e06a1adff8b9bae32820206020e086a69560cbdcbadb19f04f25951f97",

packages/ui/components/AnnouncementBar.wrn

@@ -162,9 +162,9 @@ badge: string = ""
       position: relative;
       z-index: 40;
       display: block;
-      width: 100vw;
-      max-width: 100vw;
-      margin-inline: calc(50% - 50vw);
+      width: 100%;
+      max-width: 100%;
+      margin-inline: 0;
       color: var(--wrn-color-text);
     }
 

packages/ui/package.json

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

packages/ui/test/ui.test.ts

@@ -2941,6 +2941,12 @@ test("mega menu renders column groups in an anchored panel", async () => {
   expect(source).toContain("box-sizing: border-box");
 });
 
+test("announcement full-width surface does not create viewport scrollbar overflow", () => {
+  const source = readFileSync(uiComponentPath("AnnouncementBar"), "utf8");
+  expect(source).not.toContain("width: 100vw");
+  expect(source).not.toContain("calc(50% - 50vw)");
+});
+
 test("mega menu columns take roving focus and survive an empty column list", async () => {
   const source = readFileSync(uiComponentPath("MegaMenu"), "utf8");
   const html = await renderComponent(source, { label: "Empty", columns: [] });