From e64c47279f1264959b0408c6d250ef2c0879c10e Mon Sep 17 00:00:00 2001
From: Jonathan Dobson <jon.m.dobson@gmail.com>
Date: Mon, 25 Aug 2025 16:27:21 -0400
Subject: [PATCH] Fix FloatingWindow & BrowserStream UI Bugs (#3299)

---
 .../src/components/BrowserStream.tsx          |  2 +-
 .../src/components/FloatingWindow.tsx         | 27 ++++++++++++++-----
 .../src/routes/workflows/editor/Workspace.tsx | 12 ++++++++-
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/skyvern-frontend/src/components/BrowserStream.tsx b/skyvern-frontend/src/components/BrowserStream.tsx
index 15727d4d..d0bf8c86 100644
--- a/skyvern-frontend/src/components/BrowserStream.tsx
+++ b/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
diff --git a/skyvern-frontend/src/components/FloatingWindow.tsx b/skyvern-frontend/src/components/FloatingWindow.tsx
index e9339809..fc0f7d75 100644
--- a/skyvern-frontend/src/components/FloatingWindow.tsx
+++ b/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}
diff --git a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
index 26eb2c72..3a6fbc45 100644
--- a/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/Workspace.tsx
@@ -127,6 +127,7 @@ function Workspace({
     "history",
     "infiniteCanvas",
   ]);
+  const [hideControlButtons, setHideControlButtons] = useState(false);
 
   // ---start fya: https://github.com/frontyardart
   const hasForLoopNode = nodes.some((node) => node.type === "loop");
@@ -799,6 +800,15 @@ function Workspace({
           onBreakout={handleOnBreakout}
           onCycle={handleOnCycle}
           onFocus={() => promote("browserWindow")}
+          onMinimize={() => {
+            setHideControlButtons(true);
+          }}
+          onMaximize={() => {
+            setHideControlButtons(false);
+          }}
+          onRestore={() => {
+            setHideControlButtons(false);
+          }}
         >
           {activeDebugSession &&
           activeDebugSession.browser_session_id &&
@@ -806,7 +816,7 @@ function Workspace({
             <BrowserStream
               interactive={false}
               browserSessionId={activeDebugSession.browser_session_id}
-              showControlButtons={true}
+              showControlButtons={!hideControlButtons}
             />
           ) : (
             <div className="flex h-full w-full flex-col items-center justify-center gap-2 pb-2 pt-4 text-sm text-slate-400">