fix(ui): align top-menu dropdowns (#176)

Author: benvinegar

src/ui/components/chrome/menu.ts

@@ -34,7 +34,9 @@ export const MENU_ORDER = Object.keys(MENU_LABELS) as MenuId[];
 export function buildMenuSpecs() {
   return MENU_ORDER.reduce<MenuSpec[]>((items, id) => {
     const previous = items.at(-1);
-    const left = previous ? previous.left + previous.width + 1 : 1;
+    // Each menu label already includes its own leading/trailing padding inside the fixed-width box,
+    // so adjacent menu boxes are packed directly next to each other without an extra inter-box gap.
+    const left = previous ? previous.left + previous.width : 1;
     items.push({
       id,
       left,

src/ui/lib/ui-lib.test.ts

@@ -83,8 +83,14 @@ describe("ui helpers", () => {
       "agent",
       "help",
     ]);
-    expect(specs[0]).toMatchObject({ id: "file", left: 1, width: 6, label: "File" });
-    expect(specs[1]?.left).toBe(specs[0]!.left + specs[0]!.width + 1);
+    expect(specs).toMatchObject([
+      { id: "file", left: 1, width: 6, label: "File" },
+      { id: "view", left: 7, width: 6, label: "View" },
+      { id: "navigate", left: 13, width: 10, label: "Navigate" },
+      { id: "theme", left: 23, width: 7, label: "Theme" },
+      { id: "agent", left: 30, width: 7, label: "Agent" },
+      { id: "help", left: 37, width: 6, label: "Help" },
+    ]);
   });
 
   test("nextMenuItemIndex skips separators in both directions", () => {