Fix compact menu overlay in compact mode

src/features/settings/components/tabs/appearance-settings.tsx

@@ -17,6 +17,7 @@ import { FontSelector } from "@/ui/font-selector";
 import Section, { SettingRow } from "@/ui/section";
 import Select from "@/ui/select";
 import Switch from "@/ui/switch";
+import { IS_MAC } from "@/utils/platform";
 
 export const AppearanceSettings = () => {
   const { settings, updateSetting } = useSettingsStore();
@@ -238,21 +239,23 @@ export const AppearanceSettings = () => {
           />
         </SettingRow>
 
-        <SettingRow
-          label="Native Menu Bar"
-          description="Use the native menu bar or a custom UI menu bar"
-          onReset={() => updateSetting("nativeMenuBar", getDefaultSetting("nativeMenuBar"))}
-          canReset={settings.nativeMenuBar !== getDefaultSetting("nativeMenuBar")}
-        >
-          <Switch
-            checked={settings.nativeMenuBar}
-            onChange={(checked) => {
-              updateSetting("nativeMenuBar", checked);
-              invoke("toggle_menu_bar", { toggle: checked });
-            }}
-            size="sm"
-          />
-        </SettingRow>
+        {IS_MAC && (
+          <SettingRow
+            label="Native Menu Bar"
+            description="Use the native menu bar or a custom UI menu bar"
+            onReset={() => updateSetting("nativeMenuBar", getDefaultSetting("nativeMenuBar"))}
+            canReset={settings.nativeMenuBar !== getDefaultSetting("nativeMenuBar")}
+          >
+            <Switch
+              checked={settings.nativeMenuBar}
+              onChange={(checked) => {
+                updateSetting("nativeMenuBar", checked);
+                invoke("toggle_menu_bar", { toggle: checked });
+              }}
+              size="sm"
+            />
+          </SettingRow>
+        )}
 
         <SettingRow
           label="Compact Menu Bar"

src/features/settings/config/search-index.ts

@@ -1,4 +1,5 @@
 import type { SettingSearchRecord } from "../types/search";
+import { IS_MAC } from "@/utils/platform";
 
 export const settingsSearchIndex: SettingSearchRecord[] = [
   // General Settings
@@ -331,14 +332,18 @@ export const settingsSearchIndex: SettingSearchRecord[] = [
     description: "Choose where to position the sidebar",
     keywords: ["sidebar", "position", "left", "right", "layout"],
   },
-  {
-    id: "appearance-native-menu-bar",
-    tab: "appearance",
-    section: "Layout",
-    label: "Native Menu Bar",
-    description: "Use the native menu bar or a custom UI menu bar",
-    keywords: ["menu", "bar", "native", "ui"],
-  },
+  ...(IS_MAC
+    ? [
+        {
+          id: "appearance-native-menu-bar",
+          tab: "appearance",
+          section: "Layout",
+          label: "Native Menu Bar",
+          description: "Use the native menu bar or a custom UI menu bar",
+          keywords: ["menu", "bar", "native", "ui"],
+        } satisfies SettingSearchRecord,
+      ]
+    : []),
   {
     id: "appearance-compact-menu-bar",
     tab: "appearance",

src/features/window/custom-title-bar.tsx

@@ -151,10 +151,29 @@ const CustomTitleBar = ({ showMinimal = false }: CustomTitleBarProps) => {
         className="relative z-50 flex h-10 select-none items-start justify-between bg-secondary-bg/70 pt-2 pr-3 pl-[96px] backdrop-blur-sm"
       >
         {/* Left side: keep clear of traffic lights */}
-        <div className="pointer-events-auto flex h-7 min-w-0 items-center gap-2.5">
-          {!settings.nativeMenuBar && (
+        <div className="pointer-events-auto flex h-7 min-w-0 items-center gap-2">
+          {!settings.nativeMenuBar && !settings.compactMenuBar && (
             <CustomMenuBar activeMenu={menuBarActiveMenu} setActiveMenu={setMenuBarActiveMenu} />
           )}
+          {!settings.nativeMenuBar && settings.compactMenuBar && (
+            <div className="relative">
+              <Tooltip content="Menu" side="bottom">
+                <button
+                  onClick={() => {
+                    setMenuBarActiveMenu("File");
+                  }}
+                  className="flex h-6 w-8 items-center justify-center rounded-full border border-border bg-primary-bg/70 py-0.5 text-text-lighter transition-colors hover:bg-hover hover:text-text"
+                >
+                  <MenuIcon size={16} />
+                </button>
+              </Tooltip>
+              <CustomMenuBar
+                activeMenu={menuBarActiveMenu}
+                setActiveMenu={setMenuBarActiveMenu}
+                compactFloating
+              />
+            </div>
+          )}
           <SidebarPaneSelector
             isGitViewActive={isGitViewActive}
             isGitHubPRsViewActive={isGitHubPRsViewActive}
@@ -186,22 +205,29 @@ const CustomTitleBar = ({ showMinimal = false }: CustomTitleBarProps) => {
     >
       {/* Left side */}
       <div data-tauri-drag-region className="flex flex-1 items-center px-1">
-        {!settings.nativeMenuBar && (
+        {!settings.nativeMenuBar && !settings.compactMenuBar && (
           <CustomMenuBar activeMenu={menuBarActiveMenu} setActiveMenu={setMenuBarActiveMenu} />
         )}
 
         {/* Menu bar button */}
         {!settings.nativeMenuBar && settings.compactMenuBar && (
-          <Tooltip content="Menu" side="bottom">
-            <button
-              onClick={() => {
-                setMenuBarActiveMenu("File");
-              }}
-              className="mr-2 flex h-6 w-8 items-center justify-center rounded-full border border-border bg-primary-bg/70 py-0.5 text-text-lighter transition-colors hover:bg-hover hover:text-text"
-            >
-              <MenuIcon size={16} />
-            </button>
-          </Tooltip>
+          <div className="relative mr-2">
+            <Tooltip content="Menu" side="bottom">
+              <button
+                onClick={() => {
+                  setMenuBarActiveMenu("File");
+                }}
+                className="flex h-6 w-8 items-center justify-center rounded-full border border-border bg-primary-bg/70 py-0.5 text-text-lighter transition-colors hover:bg-hover hover:text-text"
+              >
+                <MenuIcon size={16} />
+              </button>
+            </Tooltip>
+            <CustomMenuBar
+              activeMenu={menuBarActiveMenu}
+              setActiveMenu={setMenuBarActiveMenu}
+              compactFloating
+            />
+          </div>
         )}
 
         <div className="pointer-events-auto mr-2">

src/features/window/menu-bar/window-menu-bar.tsx

@@ -15,9 +15,10 @@ import Submenu from "./submenu";
 interface Props {
   activeMenu: string | null;
   setActiveMenu: React.Dispatch<React.SetStateAction<string | null>>;
+  compactFloating?: boolean;
 }
 
-const CustomMenuBar = ({ activeMenu, setActiveMenu }: Props) => {
+const CustomMenuBar = ({ activeMenu, setActiveMenu, compactFloating = false }: Props) => {
   const { settings } = useSettingsStore();
   const [themes, setThemes] = useState<ThemeDefinition[]>([]);
   const menuBarRef = useRef<HTMLDivElement>(null);
@@ -213,6 +214,10 @@ const CustomMenuBar = ({ activeMenu, setActiveMenu }: Props) => {
       className={cn(
         "z-[10030] flex h-7 items-center gap-1 rounded-full border border-border bg-primary-bg/70 px-1 py-0.5",
         settings.compactMenuBar &&
+          compactFloating &&
+          "absolute top-[calc(100%+4px)] left-0 rounded-2xl border-border bg-primary-bg/95 shadow-xl backdrop-blur-sm",
+        settings.compactMenuBar &&
+          !compactFloating &&
           "absolute inset-0 h-full rounded-none border-none bg-transparent px-2 py-0",
       )}
     >