fix(ui): center desktop navbar menus

packages/ui/components/Navbar.wrn

@@ -321,6 +321,7 @@ size: string = "default"
     }
 
     .wrn-navbar__main {
+      position: relative;
       display: flex;
       min-height: 4.25rem;
       width: min(100%, 90rem);
@@ -409,12 +410,15 @@ size: string = "default"
     .wrn-navbar__collapse {
       min-width: 0;
       flex: 1;
+      justify-content: flex-end;
       gap: 1rem;
     }
 
     .wrn-navbar__menus {
+      position: absolute;
+      left: 50%;
       justify-content: center;
-      flex: 1;
+      transform: translateX(-50%);
       gap: 0.25rem;
     }
 
@@ -733,6 +737,8 @@ size: string = "default"
       }
     .wrn-navbar__menus,
       .wrn-navbar__actions {
+        position: static;
+        transform: none;
         width: 100%;
         align-items: stretch;
         flex-direction: column;
@@ -797,6 +803,8 @@ size: string = "default"
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__collapse.is-open { display: flex; }
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__menus,
       .wrn-navbar[data-collapse-at="1100px"] .wrn-navbar__actions {
+        position: static;
+        transform: none;
         width: 100%;
         align-items: stretch;
         flex: none;

packages/ui/test/ui.test.ts

@@ -3135,6 +3135,8 @@ test("navbar uses a valid aria-current and takes roving focus on its menu", asyn
    */
   expect(source).not.toContain("? 'page' : ''");
   expect(source).toContain("data-wrn-roving");
+  expect(source).toContain("left: 50%;");
+  expect(source).toContain("transform: translateX(-50%);");
 
   const html = await renderComponent(source, {
     label: "Main",