From e62e7f5d27c75df3df8ea12a44c43aa6b83eb743 Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ghanwat.ajay@workroot.in>
Date: Tue, 25 Aug 2026 19:31:17 +0530
Subject: [PATCH] fix(ui): center desktop navbar menus

---
 packages/ui/components/Navbar.wrn | 10 +++++++++-
 packages/ui/test/ui.test.ts       |  2 ++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/Navbar.wrn b/packages/ui/components/Navbar.wrn
index 1aedfc7e..939b19b9 100644
--- a/packages/ui/components/Navbar.wrn
+++ b/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;
diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts
index 9f724cb4..51dcbd83 100644
--- a/packages/ui/test/ui.test.ts
+++ b/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",