fix initial sizing; add welcome message (#2958)

skyvern-frontend/src/routes/workflows/editor/panels/WorkflowDebugOverviewWindow.tsx

@@ -9,7 +9,13 @@ import { useParams } from "react-router-dom";
 
 function WorkflowDebugOverviewWindow() {
   return (
-    <FloatingWindow title="Live View">
+    <FloatingWindow
+      title="Live View"
+      initialWidth={256}
+      initialHeight={512}
+      maximized={true}
+      showMaximizeButton={true}
+    >
       <WorkflowDebugOverviewWindowIframe />
     </FloatingWindow>
   );
@@ -43,8 +49,22 @@ function WorkflowDebugOverviewWindowIframe() {
       <iframe src={dest} className="h-full w-full rounded-xl" />
     </div>
   ) : (
-    <div className="h-full w-full rounded-xl bg-[#020817] p-6">
+    // waving hand emoji
-      <p>Workflow not found</p>
+
+    <div className="flex h-full w-full flex-col items-center justify-center gap-4 overflow-y-auto rounded-xl bg-[#020817] p-6">
+      <div className="flex h-full w-full max-w-[15rem] flex-col items-center justify-center gap-4 rounded-xl bg-[#020817] p-6">
+        <div>
+          Hi! 👋 We're experimenting with a new feature called debugger.
+        </div>
+        <div>
+          This debugger allows you to see the state of your workflow in a live
+          browser.
+        </div>
+        <div>You can run individual blocks, instead of the whole workflow.</div>
+        <div>
+          To get started, press the play button on a block in your workflow.
+        </div>
+      </div>
     </div>
   );
 }