[eric] palettes: portal Cmd+K and Cmd+F to a body top layer so cards stop painting over them

frontend/src/app/components/overlays/GlobalSearchPalette.tsx

@@ -16,6 +16,7 @@ import { createDashboard } from '@/shared/state/dashboardsSlice';
 import { openSettingsModal } from '@/shared/state/settingsSlice';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
 import { friendlyStatusLabel } from '@/shared/statusLabel';
+import TopLayerPortal from '@/shared/TopLayerPortal';
 
 interface Props {
   open: boolean;
@@ -205,7 +206,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
   const isStillSearching = !!query.trim() && searchLoading && searchQuery !== query.trim();
 
   return (
-    <>
+    <TopLayerPortal>
       {/* Backdrop */}
       <Box
         onClick={onClose}
@@ -338,7 +339,7 @@ const GlobalSearchPalette: React.FC<Props> = ({ open, onClose }) => {
           <span>esc close</span>
         </Box>
       </Box>
-    </>
+    </TopLayerPortal>
   );
 };
 

frontend/src/app/pages/Dashboard/controls/CardSearchPalette.tsx

@@ -4,6 +4,7 @@ import InputBase from '@mui/material/InputBase';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
 import { useClaudeTokens } from '@/shared/styles/ThemeContext';
+import TopLayerPortal from '@/shared/TopLayerPortal';
 import type { CardPosition, ViewCardPosition, BrowserCardPosition } from '@/shared/state/dashboardLayoutSlice';
 import type { AgentSession } from '@/shared/state/agentsSlice';
 
@@ -125,7 +126,7 @@ const CardSearchPalette: React.FC<Props> = ({
   };
 
   return (
-    <>
+    <TopLayerPortal>
       {/* Backdrop */}
       <Box
         onClick={onClose}
@@ -228,7 +229,7 @@ const CardSearchPalette: React.FC<Props> = ({
           )}
         </Box>
       </Box>
-    </>
+    </TopLayerPortal>
   );
 };
 

frontend/src/shared/TopLayerPortal.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+
+// A low-z or transformed ancestor traps position:fixed, so anything that must win every stacking fight mounts on body instead.
+const TOP_LAYER = 2147483647;
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const TopLayerPortal: React.FC<Props> = ({ children }) => createPortal(
+  <div style={{ position: 'fixed', inset: 0, zIndex: TOP_LAYER }}>{children}</div>,
+  document.body,
+);
+
+export default TopLayerPortal;