Jon/debugger layout (#3340)

skyvern-frontend/src/components/BrowserStream.tsx

@@ -328,7 +328,7 @@ function BrowserStream({
 
   return (
     <div
-      className={cn("browser-stream", {
+      className={cn("browser-stream flex items-center justify-center", {
         "user-is-controlling": theUserIsControlling,
       })}
       ref={setCanvasContainerRef}
@@ -369,7 +369,7 @@ function BrowserStream({
         </div>
       )}
       {!isVncConnected && (
-        <div className="flex h-full w-full flex-col items-center justify-center gap-2 pb-2 pt-4 text-sm text-slate-400">
+        <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">
           <RotateThrough interval={7 * 1000}>
             <span>Hm, working on the connection...</span>
             <span>Hang tight, we're almost there...</span>

skyvern-frontend/src/components/FloatingWindow.tsx

@@ -756,4 +756,4 @@ function FloatingWindow({
   );
 }
 
-export { FloatingWindow };
+export { BreakoutButton, FloatingWindow, PowerButton, ReloadButton };

skyvern-frontend/src/components/Tip.tsx

@@ -0,0 +1,31 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+function Tip({
+  asChild = true,
+  children,
+  content,
+}: {
+  asChild?: boolean;
+  children: React.ReactNode;
+  content: string | null;
+}) {
+  if (content === null) {
+    return children;
+  }
+
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={300}>
+        <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
+        <TooltipContent className="max-w-[250px]">{content}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export { Tip };

skyvern-frontend/src/components/browser-stream.css

@@ -3,7 +3,6 @@
   width: 100%;
   height: 100%;
   min-height: 0;
-  padding: 0.5rem;
   overflow: visible;
 
   transition: padding 0.2s ease-in-out;