From 344481cc1e93356405de95975fe8882eb4ce5a7c Mon Sep 17 00:00:00 2001
From: DHX <2587450776@qq.com>
Date: Thu, 14 May 2026 20:41:42 +0800
Subject: [PATCH 1/2] fix(settings): make popup components respect UI zoom
 scaling

Modal, Toast, and dropdown menus were rendered to document.body via
createPortal, bypassing the CSS zoom applied to .app-shell. Now all
overlay components portal to #app-overlay-root inside AppShell so they
inherit the zoom transform.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/controls/PermissionModeSelector.tsx |  3 ++-
 desktop/src/components/layout/AppShell.tsx         |  1 +
 desktop/src/components/shared/DirectoryPicker.tsx  |  3 ++-
 desktop/src/components/shared/Modal.tsx            |  3 ++-
 .../components/shared/RepositoryLaunchControls.tsx |  3 ++-
 desktop/src/components/shared/Toast.tsx            |  7 ++++---
 desktop/src/lib/overlayRoot.tsx                    | 14 ++++++++++++++
 7 files changed, 27 insertions(+), 7 deletions(-)
 create mode 100644 desktop/src/lib/overlayRoot.tsx

diff --git a/desktop/src/components/controls/PermissionModeSelector.tsx b/desktop/src/components/controls/PermissionModeSelector.tsx
index 1fb2e083a6..2a56f5da05 100644
--- a/desktop/src/components/controls/PermissionModeSelector.tsx
+++ b/desktop/src/components/controls/PermissionModeSelector.tsx
@@ -10,6 +10,7 @@ import type { PermissionMode } from '../../types/settings'
 import { useMobileViewport } from '../../hooks/useMobileViewport'
 import { isTauriRuntime } from '../../lib/desktopRuntime'
 import { MobileBottomSheet } from '../shared/MobileBottomSheet'
+import { getOverlayRoot } from '../../lib/overlayRoot'
 
 const MODE_ICONS: Record<PermissionMode, string> = {
   default: 'verified_user',
@@ -278,7 +279,7 @@ export function PermissionModeSelector({ workDir: workDirProp, compact = false,
             </div>
           </div>
         </div>,
-        document.body,
+        getOverlayRoot(),
       )}
     </div>
   )
diff --git a/desktop/src/components/layout/AppShell.tsx b/desktop/src/components/layout/AppShell.tsx
index af09547bf1..256d4b02b8 100644
--- a/desktop/src/components/layout/AppShell.tsx
+++ b/desktop/src/components/layout/AppShell.tsx
@@ -274,6 +274,7 @@ export function AppShell() {
       </main>
       <ToastContainer />
       <UpdateChecker />
+      <div id="app-overlay-root" />
     </div>
   )
 }
diff --git a/desktop/src/components/shared/DirectoryPicker.tsx b/desktop/src/components/shared/DirectoryPicker.tsx
index 3d063955f0..9f4590df45 100644
--- a/desktop/src/components/shared/DirectoryPicker.tsx
+++ b/desktop/src/components/shared/DirectoryPicker.tsx
@@ -5,6 +5,7 @@ import { filesystemApi } from '../../api/filesystem'
 import { useTranslation } from '../../i18n'
 import { useMobileViewport } from '../../hooks/useMobileViewport'
 import { MobileBottomSheet } from './MobileBottomSheet'
+import { getOverlayRoot } from '../../lib/overlayRoot'
 
 type Props = {
   value: string
@@ -345,7 +346,7 @@ export function DirectoryPicker({ value, onChange, variant = 'chip', isGitProjec
           >
             {dropdownContent}
           </div>,
-          document.body,
+          getOverlayRoot(),
         )
       )}
     </div>
diff --git a/desktop/src/components/shared/Modal.tsx b/desktop/src/components/shared/Modal.tsx
index adaa82c596..50da9213a4 100644
--- a/desktop/src/components/shared/Modal.tsx
+++ b/desktop/src/components/shared/Modal.tsx
@@ -1,5 +1,6 @@
 import { useEffect, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { getOverlayRoot } from '../../lib/overlayRoot'
 
 type ModalProps = {
   open: boolean
@@ -63,6 +64,6 @@ export function Modal({ open, onClose, title, children, width = 560, footer }: M
         )}
       </div>
     </div>,
-    document.body,
+    getOverlayRoot(),
   )
 }
diff --git a/desktop/src/components/shared/RepositoryLaunchControls.tsx b/desktop/src/components/shared/RepositoryLaunchControls.tsx
index de78fdb7e7..3ecd6af793 100644
--- a/desktop/src/components/shared/RepositoryLaunchControls.tsx
+++ b/desktop/src/components/shared/RepositoryLaunchControls.tsx
@@ -19,6 +19,7 @@ import { DirectoryPicker } from './DirectoryPicker'
 import { useMobileViewport } from '../../hooks/useMobileViewport'
 import { isTauriRuntime } from '../../lib/desktopRuntime'
 import { MobileBottomSheet } from './MobileBottomSheet'
+import { getOverlayRoot } from '../../lib/overlayRoot'
 
 type Props = {
   workDir: string
@@ -555,7 +556,7 @@ export function RepositoryLaunchControls({
               })}
             </div>
           </div>,
-          document.body,
+          getOverlayRoot(),
         )
       )}
 
diff --git a/desktop/src/components/shared/Toast.tsx b/desktop/src/components/shared/Toast.tsx
index a48b1735fe..57da6a7a4f 100644
--- a/desktop/src/components/shared/Toast.tsx
+++ b/desktop/src/components/shared/Toast.tsx
@@ -1,4 +1,5 @@
 import { useUIStore, type Toast as ToastType } from '../../stores/uiStore'
+import { createOverlayPortal } from '../../lib/overlayRoot'
 
 const typeStyles: Record<ToastType['type'], string> = {
   success: 'border-l-4 border-l-[var(--color-success)]',
@@ -37,11 +38,11 @@ export function ToastContainer() {
 
   if (toasts.length === 0) return null
 
-  return (
+  return createOverlayPortal(
     <div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm">
       {toasts.map((toast) => (
         <ToastItem key={toast.id} toast={toast} />
       ))}
-    </div>
+    </div>,
   )
-}
+}
\ No newline at end of file
diff --git a/desktop/src/lib/overlayRoot.tsx b/desktop/src/lib/overlayRoot.tsx
new file mode 100644
index 0000000000..2141f1f1dd
--- /dev/null
+++ b/desktop/src/lib/overlayRoot.tsx
@@ -0,0 +1,14 @@
+import { createPortal } from 'react-dom'
+
+let overlayRoot: HTMLElement | null = null
+
+export function getOverlayRoot(): HTMLElement {
+  if (!overlayRoot) {
+    overlayRoot = document.getElementById('app-overlay-root') ?? document.body
+  }
+  return overlayRoot
+}
+
+export function createOverlayPortal(children: React.ReactNode): React.ReactPortal {
+  return createPortal(children, getOverlayRoot())
+}
\ No newline at end of file

From b03b5709fd046c31b9dac84a8368ae3c21e5d9eb Mon Sep 17 00:00:00 2001
From: DHX <2587450776@qq.com>
Date: Thu, 14 May 2026 22:54:43 +0800
Subject: [PATCH 2/2] fix(contextmenu): correct context menu positioning for UI
 zoom scaling

- Use mousedown with button check (e.button !== 0) to prevent menu closing on right-click
- Add onClick stopPropagation on all context menu divs to prevent event bubbling
- Apply uiZoom scaling correction to context menu positioning across Sidebar, TabBar, and WorkspacePanel

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 desktop/src/components/layout/Sidebar.tsx     | 18 ++++++++++---
 desktop/src/components/layout/TabBar.tsx      | 21 ++++++++++++---
 .../components/workspace/WorkspacePanel.tsx   | 26 ++++++++++++++++---
 3 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/desktop/src/components/layout/Sidebar.tsx b/desktop/src/components/layout/Sidebar.tsx
index 15f9897691..7a85a5dd55 100644
--- a/desktop/src/components/layout/Sidebar.tsx
+++ b/desktop/src/components/layout/Sidebar.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import { useSessionStore } from '../../stores/sessionStore'
 import { useUIStore } from '../../stores/uiStore'
+import { useSettingsStore } from '../../stores/settingsStore'
 import { useTranslation } from '../../i18n'
 import { ProjectFilter } from './ProjectFilter'
 import { ConfirmDialog } from '../shared/ConfirmDialog'
@@ -43,8 +44,10 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
   const activeTabId = useTabStore((s) => s.activeTabId)
   const closeTab = useTabStore((s) => s.closeTab)
   const disconnectSession = useChatStore((s) => s.disconnectSession)
+  const uiZoom = useSettingsStore((s) => s.uiZoom)
   const [searchQuery, setSearchQuery] = useState('')
   const [contextMenu, setContextMenu] = useState<{ id: string; x: number; y: number } | null>(null)
+  const [rightClickedSessionId, setRightClickedSessionId] = useState<string | null>(null)
   const [pendingDeleteSessionId, setPendingDeleteSessionId] = useState<string | null>(null)
   const [pendingBatchDeleteSessionIds, setPendingBatchDeleteSessionIds] = useState<string[] | null>(null)
   const [isBatchDeleting, setIsBatchDeleting] = useState(false)
@@ -64,9 +67,13 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
 
   useEffect(() => {
     if (!contextMenu) return
-    const close = () => setContextMenu(null)
-    document.addEventListener('click', close)
-    return () => document.removeEventListener('click', close)
+    const close = (e: MouseEvent) => {
+      if (e.button !== 0) return
+      setContextMenu(null)
+      setRightClickedSessionId(null)
+    }
+    document.addEventListener('mousedown', close)
+    return () => document.removeEventListener('mousedown', close)
   }, [contextMenu])
 
   const filteredSessions = useMemo(() => {
@@ -100,6 +107,7 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
     e.preventDefault()
     if (isBatchMode) return
     setContextMenu({ id, x: e.clientX, y: e.clientY })
+    setRightClickedSessionId(id)
   }, [isBatchMode])
 
   const handleDelete = useCallback((id: string) => {
@@ -529,6 +537,7 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
                                 ? 'sidebar-session-row--active border-transparent bg-[var(--color-sidebar-item-active)] text-[var(--color-text-primary)]'
                                 : 'sidebar-session-row--idle border-transparent text-[var(--color-text-secondary)] hover:bg-[var(--color-sidebar-item-hover)]'
                               }
+                              ${session.id === rightClickedSessionId ? 'ring-2 ring-[var(--color-brand)] ring-offset-1 ring-offset-[var(--color-surface)]' : ''}
                             `}
                             aria-pressed={isBatchMode ? selectedSessionIds.has(session.id) : undefined}
                           >
@@ -602,8 +611,9 @@ export function Sidebar({ isMobile = false, onRequestClose }: SidebarProps) {
 
       {contextMenu && (
         <div
+          onClick={(e) => e.stopPropagation()}
           className="fixed z-50 min-w-[140px] rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] py-1"
-          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-dropdown)' }}
+          style={{ left: contextMenu.x / uiZoom, top: contextMenu.y / uiZoom, boxShadow: 'var(--shadow-dropdown)' }}
         >
           <button
             onClick={() => {
diff --git a/desktop/src/components/layout/TabBar.tsx b/desktop/src/components/layout/TabBar.tsx
index b29a587bec..621fe8e206 100644
--- a/desktop/src/components/layout/TabBar.tsx
+++ b/desktop/src/components/layout/TabBar.tsx
@@ -7,6 +7,7 @@ import {
   type Tab,
 } from '../../stores/tabStore'
 import { useChatStore } from '../../stores/chatStore'
+import { useSettingsStore } from '../../stores/settingsStore'
 import { useWorkspacePanelStore } from '../../stores/workspacePanelStore'
 import { useTerminalPanelStore } from '../../stores/terminalPanelStore'
 import { useTranslation } from '../../i18n'
@@ -46,12 +47,14 @@ export function TabBar() {
   const isTerminalPanelOpen = useTerminalPanelStore((state) =>
     activeTabId && isActiveSessionTab ? state.isPanelOpen(activeTabId) : false,
   )
+  const uiZoom = useSettingsStore((s) => s.uiZoom)
 
   const moveTab = useTabStore((s) => s.moveTab)
   const scrollRef = useRef<HTMLDivElement>(null)
   const [canScrollLeft, setCanScrollLeft] = useState(false)
   const [canScrollRight, setCanScrollRight] = useState(false)
   const [contextMenu, setContextMenu] = useState<{ sessionId: string; x: number; y: number } | null>(null)
+  const [rightClickedTabId, setRightClickedTabId] = useState<string | null>(null)
   const [closingTabId, setClosingTabId] = useState<string | null>(null)
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
   const [draggingSessionId, setDraggingSessionId] = useState<string | null>(null)
@@ -110,7 +113,10 @@ export function TabBar() {
 
   useEffect(() => {
     if (!contextMenu) return
-    const close = () => setContextMenu(null)
+    const close = () => {
+      setContextMenu(null)
+      setRightClickedTabId(null)
+    }
     document.addEventListener('click', close)
     return () => document.removeEventListener('click', close)
   }, [contextMenu])
@@ -153,10 +159,12 @@ export function TabBar() {
   const handleContextMenu = (e: React.MouseEvent, sessionId: string) => {
     e.preventDefault()
     setContextMenu({ sessionId, x: e.clientX, y: e.clientY })
+    setRightClickedTabId(sessionId)
   }
 
   const handleCloseOthers = (sessionId: string) => {
     setContextMenu(null)
+    setRightClickedTabId(null)
     const otherTabs = tabs.filter((t) => t.sessionId !== sessionId)
     for (const tab of otherTabs) {
       if (isSessionTab(tab)) disconnectSession(tab.sessionId)
@@ -166,6 +174,7 @@ export function TabBar() {
 
   const handleCloseLeft = (sessionId: string) => {
     setContextMenu(null)
+    setRightClickedTabId(null)
     const idx = tabs.findIndex((t) => t.sessionId === sessionId)
     const leftTabs = tabs.slice(0, idx)
     for (const tab of leftTabs) {
@@ -176,6 +185,7 @@ export function TabBar() {
 
   const handleCloseRight = (sessionId: string) => {
     setContextMenu(null)
+    setRightClickedTabId(null)
     const idx = tabs.findIndex((t) => t.sessionId === sessionId)
     const rightTabs = tabs.slice(idx + 1)
     for (const tab of rightTabs) {
@@ -186,6 +196,7 @@ export function TabBar() {
 
   const handleCloseAll = () => {
     setContextMenu(null)
+    setRightClickedTabId(null)
     for (const tab of tabs) {
       if (isSessionTab(tab)) disconnectSession(tab.sessionId)
       closeTabWithCleanup(tab)
@@ -307,6 +318,7 @@ export function TabBar() {
             ref={(node) => { tabRefs.current.set(tab.sessionId, node) }}
             tab={tab}
             isActive={tab.sessionId === activeTabId}
+            isContextMenuTarget={tab.sessionId === rightClickedTabId}
             isDragOver={dragOverIndex === index}
             isDragging={tab.sessionId === draggingSessionId}
             dragOffsetX={tab.sessionId === draggingSessionId ? dragOffsetX : 0}
@@ -360,8 +372,9 @@ export function TabBar() {
 
       {contextMenu && (
         <div
+          onClick={(e) => e.stopPropagation()}
           className="fixed z-50 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--radius-md)] py-1 min-w-[160px]"
-          style={{ left: contextMenu.x, top: contextMenu.y, boxShadow: 'var(--shadow-dropdown)' }}
+          style={{ left: contextMenu.x / uiZoom, top: contextMenu.y / uiZoom, boxShadow: 'var(--shadow-dropdown)' }}
         >
           <button
             onClick={() => { handleClose(contextMenu.sessionId); setContextMenu(null) }}
@@ -439,6 +452,7 @@ export function TabBar() {
 const TabItem = forwardRef<HTMLDivElement, {
   tab: Tab
   isActive: boolean
+  isContextMenuTarget: boolean
   isDragOver: boolean
   isDragging: boolean
   dragOffsetX: number
@@ -446,7 +460,7 @@ const TabItem = forwardRef<HTMLDivElement, {
   onClose: () => void
   onContextMenu: (e: React.MouseEvent) => void
   onMouseDown: (event: React.MouseEvent) => void
-}>(({ tab, isActive, isDragOver, isDragging, dragOffsetX, onClick, onClose, onContextMenu, onMouseDown }, ref) => {
+}>(({ tab, isActive, isContextMenuTarget, isDragOver, isDragging, dragOffsetX, onClick, onClose, onContextMenu, onMouseDown }, ref) => {
   return (
     <div
       ref={ref}
@@ -462,6 +476,7 @@ const TabItem = forwardRef<HTMLDivElement, {
           ? 'bg-[var(--color-surface)] shadow-[inset_0_-2px_0_var(--color-brand)]'
           : 'bg-transparent hover:bg-[var(--color-surface-hover)]'
         }
+        ${isContextMenuTarget ? 'ring-2 ring-[var(--color-brand)] ring-offset-1 ring-offset-[var(--color-surface)]' : ''}
         ${isDragging ? 'opacity-95 shadow-[0_10px_24px_rgba(0,0,0,0.18)] ring-1 ring-[var(--color-border)]' : ''}
         ${isDragOver ? 'before:absolute before:left-0 before:top-[4px] before:bottom-[4px] before:w-[3px] before:bg-[var(--color-brand)] before:rounded-full before:shadow-[0_0_0_1px_rgba(255,255,255,0.25)]' : ''}
       `}
diff --git a/desktop/src/components/workspace/WorkspacePanel.tsx b/desktop/src/components/workspace/WorkspacePanel.tsx
index bcc46d0617..9fb746ee35 100644
--- a/desktop/src/components/workspace/WorkspacePanel.tsx
+++ b/desktop/src/components/workspace/WorkspacePanel.tsx
@@ -7,6 +7,7 @@ import type {
   WorkspaceTreeResult,
 } from '../../api/sessions'
 import { useTranslation } from '../../i18n'
+import { useSettingsStore } from '../../stores/settingsStore'
 import { useShallow } from 'zustand/react/shallow'
 import {
   useWorkspacePanelStore,
@@ -41,6 +42,8 @@ type TreeNodeProps = {
   onToggle: (path: string) => void
   onOpenFile: (path: string) => void
   onFileContextMenu: (event: MouseEvent, path: string) => void
+  rightClickedFilePath: string | null
+  rightClickedPreviewTabId: string | null
   activePath: string | null
 }
 
@@ -563,6 +566,8 @@ function TreeNode({
   onToggle,
   onOpenFile,
   onFileContextMenu,
+  rightClickedFilePath,
+  rightClickedPreviewTabId,
   activePath,
 }: TreeNodeProps) {
   const t = useTranslation()
@@ -584,7 +589,7 @@ function TreeNode({
           isActive
             ? 'bg-[var(--color-surface-selected)] shadow-[inset_0_0_0_1.5px_var(--color-border-focus)]'
             : 'hover:bg-[var(--color-surface-hover)]'
-        }`}
+        }${entry.path === rightClickedFilePath ? ' ring-2 ring-[var(--color-brand)] ring-offset-1' : ''}`}
         style={{ paddingLeft: indent }}
       >
         <FileTypeBadge name={entry.name} subtle={!isActive} />
@@ -662,6 +667,8 @@ function TreeNode({
                 onToggle={onToggle}
                 onOpenFile={onOpenFile}
                 onFileContextMenu={onFileContextMenu}
+                rightClickedFilePath={rightClickedFilePath}
+                rightClickedPreviewTabId={rightClickedPreviewTabId}
                 activePath={activePath}
               />
             ))}
@@ -676,7 +683,9 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
   const [filterQuery, setFilterQuery] = useState('')
   const [isViewMenuOpen, setIsViewMenuOpen] = useState(false)
   const [previewTabContextMenu, setPreviewTabContextMenu] = useState<{ tabId: string; x: number; y: number } | null>(null)
+  const [rightClickedPreviewTabId, setRightClickedPreviewTabId] = useState<string | null>(null)
   const [fileContextMenu, setFileContextMenu] = useState<{ path: string; x: number; y: number } | null>(null)
+  const [rightClickedFilePath, setRightClickedFilePath] = useState<string | null>(null)
   const width = useWorkspacePanelStore((state) => state.width)
   const isOpen = useWorkspacePanelStore((state) => state.isPanelOpen(sessionId))
   const activeView = useWorkspacePanelStore((state) => state.getActiveView(sessionId))
@@ -703,6 +712,7 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
   const closePanel = useWorkspacePanelStore((state) => state.closePanel)
   const addWorkspaceReference = useWorkspaceChatContextStore((state) => state.addReference)
   const chatState = useChatStore((state) => state.sessions[sessionId]?.chatState ?? 'idle')
+  const uiZoom = useSettingsStore((s) => s.uiZoom)
   const refreshLifecycleRef = useRef({
     sessionId,
     isOpen: false,
@@ -766,6 +776,8 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
     const close = () => {
       setPreviewTabContextMenu(null)
       setFileContextMenu(null)
+      setRightClickedPreviewTabId(null)
+      setRightClickedFilePath(null)
     }
     document.addEventListener('click', close)
     return () => document.removeEventListener('click', close)
@@ -824,14 +836,18 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
     event.preventDefault()
     event.stopPropagation()
     setFileContextMenu(null)
+    setRightClickedFilePath(null)
     setPreviewTabContextMenu({ tabId, x: event.clientX, y: event.clientY })
+    setRightClickedPreviewTabId(tabId)
   }
 
   const handleFileContextMenu = (event: MouseEvent, path: string) => {
     event.preventDefault()
     event.stopPropagation()
     setPreviewTabContextMenu(null)
+    setRightClickedPreviewTabId(null)
     setFileContextMenu({ path, x: event.clientX, y: event.clientY })
+    setRightClickedFilePath(path)
   }
 
   const handleClosePreviewTabs = (scope: WorkspacePreviewCloseScope) => {
@@ -942,6 +958,8 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
             }}
             onOpenFile={handleOpenFile}
             onFileContextMenu={handleFileContextMenu}
+            rightClickedFilePath={rightClickedFilePath}
+            rightClickedPreviewTabId={rightClickedPreviewTabId}
             activePath={activeTreePath}
           />
         ))}
@@ -1039,7 +1057,7 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
                   isActive
                     ? 'bg-[var(--color-surface-selected)] text-[var(--color-text-primary)]'
                     : 'text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)]'
-                }`}
+                }${tab.id === rightClickedPreviewTabId ? ' ring-2 ring-[var(--color-brand)] ring-offset-1 ring-offset-[var(--color-surface-container-lowest)]' : ''}`}
               >
                 <button
                   type="button"
@@ -1077,7 +1095,7 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
         <div
           role="menu"
           className="fixed z-50 min-w-[156px] rounded-[10px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-1 text-[12px] shadow-[var(--shadow-dropdown)]"
-          style={{ left: previewTabContextMenu.x, top: previewTabContextMenu.y }}
+          style={{ left: previewTabContextMenu.x / uiZoom, top: previewTabContextMenu.y / uiZoom }}
           onClick={(event) => event.stopPropagation()}
         >
           <button
@@ -1212,7 +1230,7 @@ export function WorkspacePanel({ sessionId }: WorkspacePanelProps) {
         <div
           role="menu"
           className="fixed z-50 min-w-[156px] rounded-[10px] border border-[var(--color-border)] bg-[var(--color-surface-container-lowest)] py-1 text-[12px] shadow-[var(--shadow-dropdown)]"
-          style={{ left: fileContextMenu.x, top: fileContextMenu.y }}
+          style={{ left: fileContextMenu.x / uiZoom, top: fileContextMenu.y / uiZoom }}
           onClick={(event) => event.stopPropagation()}
         >
           <button