multiple UI fixes/updates (#3422)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -343,9 +343,12 @@ function BrowserStream({
 
   return (
     <div
-      className={cn("browser-stream flex items-center justify-center", {
-        "user-is-controlling": theUserIsControlling,
-      })}
+      className={cn(
+        "browser-stream relative flex items-center justify-center",
+        {
+          "user-is-controlling": theUserIsControlling,
+        },
+      )}
       ref={setCanvasContainerRef}
     >
       {isVncConnected && (
@@ -384,7 +387,7 @@ function BrowserStream({
         </div>
       )}
       {!isVncConnected && (
-        <div className="flex aspect-video w-full flex-col items-center justify-center gap-2 rounded-md border border-slate-800 text-sm text-slate-400">
+        <div className="absolute left-0 top-1/2 flex aspect-video w-full -translate-y-1/2 flex-col items-center justify-center gap-2 rounded-md border border-slate-800 text-sm text-slate-400">
           <RotateThrough interval={7 * 1000}>
             <span>Hm, working on the connection...</span>
             <span>Hang tight, we're almost there...</span>

skyvern-frontend/src/components/Splitter.tsx

@@ -1,7 +1,7 @@
 import { useRef, useState, RefObject } from "react";
-import { useMountEffect } from "@/hooks/useMountEffect";
 import { cn } from "@/util/utils";
 import { useOnChange } from "@/hooks/useOnChange";
+import { useMountEffect } from "@/hooks/useMountEffect";
 
 function Handle({
   direction,
@@ -341,21 +341,30 @@ function Splitter({
   const [isDragging, setIsDragging] = useState(false);
 
   useMountEffect(() => {
-    if (containerRef.current) {
-      const newPosition = normalizeUnitsToPercent(
-        containerRef,
-        direction,
-        firstSizingTarget,
-        firstSizing,
-        storageKey,
-      );
+    // small delay here, to allow for arbitrary layout thrashing to settle;
+    // otherwise we have to rely on an observer for the container size, and
+    // resetting whenever the container resizes it likely incorrect behaviour
+    setTimeout(() => {
+      if (containerRef.current) {
+        const newPosition = normalizeUnitsToPercent(
+          containerRef,
+          direction,
+          firstSizingTarget,
+          firstSizing,
+          storageKey,
+        );
 
-      setSplitPosition(newPosition);
+        setSplitPosition(newPosition);
 
-      if (storageKey) {
-        setStoredSizing(firstSizingTarget, storageKey, newPosition.toString());
+        if (storageKey) {
+          setStoredSizing(
+            firstSizingTarget,
+            storageKey,
+            newPosition.toString(),
+          );
+        }
       }
-    }
+    }, 100);
   });
 
   useOnChange(isDragging, (newValue, oldValue) => {