click overlap event issue

frontend/common/src/components/DefaultAgentScreen.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import { PanelLeft } from 'lucide-react';
 import { 
   Button,
@@ -183,12 +184,21 @@ export const DefaultAgentScreen: React.FC = () => {
     )
   );
 
-  // Create floating action button for mobile sidebar toggle
+  // Floating action button component that uses Portal to render at document body level
-  const floatingAction = (
+  const FloatingActionButton = ({ onClick }: { onClick: () => void }) => {
+    // Only render the portal on the client side, not during SSR
+    const [mounted, setMounted] = useState(false);
+    
+    useEffect(() => {
+      setMounted(true);
+      return () => setMounted(false);
+    }, []);
+    
+    const button = (
       <Button
         variant="default"
         size="icon"
-      onClick={() => setIsDrawerOpen(true)}
+        onClick={onClick}
         aria-label="Toggle sessions panel"
         className="h-14 w-14 rounded-full shadow-xl bg-zinc-800 hover:bg-zinc-700 text-zinc-100 flex items-center justify-center border-2 border-zinc-700 dark:border-zinc-600"
       >
@@ -196,6 +206,16 @@ export const DefaultAgentScreen: React.FC = () => {
       </Button>
     );
     
+    const container = (
+      <div className="fixed bottom-6 right-6 z-[9999] md:hidden" style={{ pointerEvents: 'auto' }}>
+        {button}
+      </div>
+    );
+    
+    // Return null during SSR, or the portal on the client
+    return mounted ? createPortal(container, document.body) : null;
+  };
+
   return (
     <>
       <Layout
@@ -205,9 +225,7 @@ export const DefaultAgentScreen: React.FC = () => {
       >
         {mainContent}
       </Layout>
-      <div className="fixed bottom-6 right-6 z-50 md:hidden" style={{zIndex: 9999}}>
+      <FloatingActionButton onClick={() => setIsDrawerOpen(true)} />
-        {floatingAction}
-      </div>
     </>
   );
 };