diff --git a/frontend/common/src/components/DefaultAgentScreen.tsx b/frontend/common/src/components/DefaultAgentScreen.tsx index 4123d03..baab6f4 100644 --- a/frontend/common/src/components/DefaultAgentScreen.tsx +++ b/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,18 +184,37 @@ export const DefaultAgentScreen: React.FC = () => { ) ); - // Create floating action button for mobile sidebar toggle - const floatingAction = ( - - ); + // Floating action button component that uses Portal to render at document body level + 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 = ( + + ); + + const container = ( +