Fix floating terminal toggle overlap (#2167)

Co-authored-by: Orca <help@stably.ai>

src/renderer/src/App.tsx

@@ -275,6 +275,9 @@ function App(): React.JSX.Element {
     (s) => s.settings?.floatingTerminalTriggerLocation ?? 'floating-button'
   )
   const statusBarVisible = useAppStore((s) => s.statusBarVisible)
+  const showFloatingTerminalButton =
+    floatingTerminalEnabled &&
+    (floatingTerminalTriggerLocation === 'floating-button' || !statusBarVisible)
   // Why: the floating terminal is a transient overlay; hotkey minimize should
   // return keyboard focus to the surface the user was working in before it.
   const floatingTerminalReturnFocusRef = useRef<HTMLElement | null>(null)
@@ -1454,6 +1457,15 @@ function App(): React.JSX.Element {
                     {activeView === 'terminal' && !activeWorktreeId ? <Landing /> : null}
                   </Suspense>
                 </div>
+                {showFloatingTerminalButton ? (
+                  <FloatingTerminalToggleButton
+                    // Why: anchor the floating trigger to the center surface so it
+                    // cannot cover the worktree sidebar or right sidebar.
+                    className="absolute bottom-8 right-3"
+                    open={floatingTerminalOpen}
+                    onToggle={() => setFloatingTerminalOpenWithFocus((open) => !open)}
+                  />
+                ) : null}
               </div>
             </div>
           </div>
@@ -1465,18 +1477,10 @@ function App(): React.JSX.Element {
           {showRightSidebarControls ? <RightSidebar /> : null}
         </div>
         {floatingTerminalEnabled ? (
-          <>
-            <FloatingTerminalPanel
-              open={floatingTerminalOpen}
-              onOpenChange={setFloatingTerminalOpenWithFocus}
-            />
-            {floatingTerminalTriggerLocation === 'floating-button' || !statusBarVisible ? (
-              <FloatingTerminalToggleButton
-                open={floatingTerminalOpen}
-                onToggle={() => setFloatingTerminalOpenWithFocus((open) => !open)}
-              />
-            ) : null}
-          </>
+          <FloatingTerminalPanel
+            open={floatingTerminalOpen}
+            onOpenChange={setFloatingTerminalOpenWithFocus}
+          />
         ) : null}
         <StatusBar floatingTerminalOpen={floatingTerminalOpen} />
         {/* Why: root overlays can render Radix <Tooltip>s; keep them inside

src/renderer/src/components/floating-terminal/FloatingTerminalToggleButton.tsx

@@ -1,21 +1,24 @@
 import { TerminalSquare } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 import { FloatingTerminalIconContextMenu } from './FloatingTerminalIconContextMenu'
 
 export function FloatingTerminalToggleButton({
   open,
-  onToggle
+  onToggle,
+  className
 }: {
   open: boolean
   onToggle: () => void
+  className?: string
 }): React.JSX.Element {
   const shortcutLabel =
     typeof navigator !== 'undefined' && navigator.userAgent.includes('Mac') ? '⌘⌥T' : 'Ctrl+Alt+T'
   return (
     <FloatingTerminalIconContextMenu
       currentLocation="floating-button"
-      className="fixed bottom-8 right-3 z-40"
+      className={cn('fixed bottom-8 right-3 z-40', className)}
     >
       <Tooltip>
         <TooltipTrigger asChild>