set-initial-window-debugger-position-size-as-specified-in-the (#3139)

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -145,6 +145,7 @@ function getOs(): OS {
 function FloatingWindow({
   bounded,
   children,
+  initialPosition,
   initialWidth,
   initialHeight,
   maximized,
@@ -162,6 +163,7 @@ function FloatingWindow({
   bounded?: boolean;
   children: React.ReactNode;
   initialHeight?: number;
+  initialPosition?: { x: number; y: number };
   initialWidth?: number;
   maximized?: boolean;
   showCloseButton?: boolean;
@@ -177,22 +179,22 @@ function FloatingWindow({
 }) {
   const [reloadKey, setReloadKey] = useState(0);
   const [isReloading, setIsReloading] = useState(false);
-  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [position, setPosition] = useState(initialPosition ?? { x: 0, y: 0 });
   const [size, setSize] = useState({
-    left: 0,
-    top: 0,
+    left: initialPosition?.x ?? 0,
+    top: initialPosition?.y ?? 0,
     height: initialHeight ?? Constants.MinHeight,
     width: initialWidth ?? Constants.MinWidth,
   });
   const [lastSize, setLastSize] = useState({
-    left: 0,
-    top: 0,
+    left: initialPosition?.x ?? 0,
+    top: initialPosition?.y ?? 0,
     height: initialHeight ?? Constants.MinHeight,
     width: initialWidth ?? Constants.MinWidth,
   });
   const [restoreSize, setRestoreSize] = useState({
-    left: 0,
-    top: 0,
+    left: initialPosition?.x ?? 0,
+    top: initialPosition?.y ?? 0,
     height: initialHeight ?? Constants.MinHeight,
     width: initialWidth ?? Constants.MinWidth,
   });
@@ -286,13 +288,13 @@ function FloatingWindow({
       return;
     }
     setSize({
-      left: 0,
-      top: 0,
+      left: initialPosition?.x ?? 0,
+      top: initialPosition?.y ?? 0,
       width: initialWidth,
       height: initialHeight,
     });
-    setPosition({ x: 0, y: 0 });
-  }, [initialWidth, initialHeight]);
+    setPosition({ x: initialPosition?.x ?? 0, y: initialPosition?.y ?? 0 });
+  }, [initialWidth, initialHeight, initialPosition]);
 
   /**
    * Forces the sizing to take place after the resize is complete.

skyvern-frontend/src/routes/workflows/editor/WorkflowDebugger.tsx

@@ -186,6 +186,21 @@ function WorkflowDebugger() {
   const interactor = workflowRun && isFinalized === false ? "agent" : "human";
   const browserTitle = interactor === "agent" ? `Browser [🤖]` : `Browser [👤]`;
 
+  // ---start fya: https://github.com/frontyardart
+  const initialBrowserPosition = {
+    x: 600,
+    y: 132,
+  };
+
+  const windowWidth = window.innerWidth;
+  const rightPadding = 567;
+  const initialWidth = Math.max(
+    512,
+    windowWidth - initialBrowserPosition.x - rightPadding,
+  );
+  const initialHeight = (initialWidth / 16) * 9;
+  // ---end fya
+
   return (
     <div className="relative flex h-screen w-full">
       <Dialog
@@ -247,8 +262,9 @@ function WorkflowDebugger() {
       <FloatingWindow
         title={browserTitle}
         bounded={false}
-        initialWidth={512}
-        initialHeight={360}
+        initialPosition={initialBrowserPosition}
+        initialWidth={initialWidth}
+        initialHeight={initialHeight}
         showMaximizeButton={true}
         showMinimizeButton={true}
         showPowerButton={blockLabel === undefined && showPowerButton}