From 8e4c9f6f617b96b6da462408a89953ffe8f0d8b7 Mon Sep 17 00:00:00 2001
From: Bl0ck <36800583+Bl0ck154@users.noreply.github.com>
Date: Tue, 3 Nov 2026 16:56:06 +0100
Subject: [PATCH] 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 <24760907+l0ng-ai@users.noreply.github.com>
---
 src/workbench/TitleBar.test.tsx | 29 +++++++++++++++++++++++++++++
 src/workbench/TitleBar.tsx      | 10 ++++++----
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/src/workbench/TitleBar.test.tsx b/src/workbench/TitleBar.test.tsx
index 580e43e06..c8c802d89 100644
--- a/src/workbench/TitleBar.test.tsx
+++ b/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",
diff --git a/src/workbench/TitleBar.tsx b/src/workbench/TitleBar.tsx
index 22d18b4fe..c8352499c 100644
--- a/src/workbench/TitleBar.tsx
+++ b/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} />}