fix(titlebar): prevent expanded main menu from covering toolbar widgets (#725) (#729)

* fix(menu): keep dropdowns clear of the status bar

* fix(titlebar): hide right toolbar while hamburger menu is expanded

* test(titlebar): close expanded menu through the focused element

* style(titlebar): follow existing formatter layout for mocked menu

* test(titlebar): expect expanded menu titles instead of hamburger button

---------

Co-authored-by: l0ng-ai <[email protected]>

src/workbench/TitleBar.test.tsx

@@ -106,6 +106,35 @@ describe("title bar in Distraction Free Mode (bare)", () => {
   });
 });
 
+describe("expanded main menu in a frameless title bar", () => {
+  it("hides the right-hand toolbar while the menu is expanded and restores it on close", async () => {
+    const platform = usePlatform.getState();
+    const project = useProject.getState();
+    const menuModel = vi
+      .spyOn(commands, "menuModel")
+      .mockResolvedValue([{ kind: "submenu", id: "file", label: "File", children: [] }]);
+    usePlatform.setState({ os: "windows", framelessTitleBar: true, overlayTitleBar: false });
+    useProject.setState({ settings: { appearance: { mainMenuStyle: "hamburger" } } as Settings });
+    try {
+      render(<TitleBar />);
+      await act(async () => {});
+      const gear = () => screen.queryByRole("button", { name: "IDE and Project Settings" });
+      expect(gear()).toBeInTheDocument();
+      fireEvent.click(screen.getByRole("button", { name: "Main Menu" }));
+      await screen.findByRole("menu");
+      expect(gear()).toBeNull();
+      expect(screen.getByRole("menubar")).toBeInTheDocument();
+      fireEvent.keyDown(document.activeElement!, { key: "Escape" });
+      await act(async () => {});
+      expect(gear()).toBeInTheDocument();
+    } finally {
+      menuModel.mockRestore();
+      usePlatform.setState(platform);
+      useProject.setState(project);
+    }
+  });
+});
+
 describe("merged title bar menu", () => {
   it.each(["windows", "linux", "macos"])(
     "%s keeps toolbar controls available and uses the menu only when frameless",

src/workbench/TitleBar.tsx

@@ -318,10 +318,12 @@ export function TitleBar({
       <div className={styles.drag} data-tauri-drag-region />
       {!minimal && (
         <>
-          {toolbar && shown.right.map(entry)}
-          <div className={styles.tools}>
-            <GearButton customize={menu} />
-          </div>
+          {toolbar && !menuExpanded && shown.right.map(entry)}
+          {!menuExpanded && (
+            <div className={styles.tools}>
+              <GearButton customize={menu} />
+            </div>
+          )}
         </>
       )}
       {frameless && <WindowControls dialog={dialog} />}