fix(ui): prevent navigation surface overflow

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: [] });