redo 6035 because of 6036, which undid 6035 (#3302)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -334,7 +334,7 @@ function BrowserStream({
       ref={setCanvasContainerRef}
     >
       {isVncConnected && (
-        <div className="overlay z-10 flex items-center justify-center">
+        <div className="overlay z-10 flex items-center justify-center overflow-hidden">
           {showControlButtons && (
             <div className="control-buttons pointer-events-none relative flex h-full w-full items-center justify-center">
               <Button

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -31,6 +31,7 @@ import { PowerIcon } from "./icons/PowerIcon";
 type OS = "Windows" | "macOS" | "Linux" | "Unknown";
 
 const Constants = {
+  HandleSize: "40px",
   MinHeight: 52,
   MinWidth: 256,
 } as const;
@@ -180,11 +181,14 @@ function FloatingWindow({
   title,
   zIndex,
   // --
+  onBlur,
   onBreakout,
   onCycle,
   onFocus,
-  onBlur,
   onInteract,
+  onMinimize,
+  onMaximize,
+  onRestore,
 }: {
   bounded?: boolean;
   children: React.ReactNode;
@@ -201,11 +205,14 @@ function FloatingWindow({
   title: string;
   zIndex?: number;
   // --
+  onBlur?: () => void;
   onBreakout?: () => void;
   onCycle?: () => void;
   onFocus?: () => void;
-  onBlur?: () => void;
   onInteract?: () => void;
+  onMinimize?: () => void;
+  onMaximize?: () => void;
+  onRestore?: () => void;
 }) {
   const [reloadKey, setReloadKey] = useState(0);
   const [isReloading, setIsReloading] = useState(false);
@@ -424,6 +431,8 @@ function FloatingWindow({
     });
 
     setPosition({ x: 0, y: 0 });
+
+    onMaximize?.();
   };
 
   const minimize = () => {
@@ -459,6 +468,8 @@ function FloatingWindow({
     });
 
     setPosition({ x: left, y: top });
+
+    onMinimize?.();
   };
 
   const restore = () => {
@@ -480,6 +491,8 @@ function FloatingWindow({
 
     setIsMaximized(false);
     setIsMinimized(false);
+
+    onRestore?.();
   };
 
   const reload = () => {
@@ -571,12 +584,14 @@ function FloatingWindow({
           })}
           handleStyles={{
             bottomLeft: {
-              width: "40px",
-              height: "40px",
+              width: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
+              height: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
+              zIndex: 20,
             },
             bottomRight: {
-              width: "40px",
-              height: "40px",
+              width: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
+              height: isMinimized || isMaximized ? "0px" : Constants.HandleSize,
+              zIndex: 20,
             },
           }}
           minHeight={Constants.MinHeight}