From 98328385f8594a6ff417bbe418c7b28ef5175152 Mon Sep 17 00:00:00 2001
From: Kerem Yilmaz <kerem@skyvern.com>
Date: Tue, 17 Sep 2024 06:26:07 -0700
Subject: [PATCH] Fix workflow title initial style (#838)

---
 .../workflows/editor/WorkflowHeader.tsx       |  2 +-
 .../nodes/components/EditableNodeTitle.tsx    | 68 +++++++++++--------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
index 0a01721e..d1cc74a0 100644
--- a/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/WorkflowHeader.tsx
@@ -56,7 +56,7 @@ function WorkflowHeader({
           editable={true}
           onChange={onTitleChange}
           value={title}
-          className="max-w-96 text-3xl"
+          className="text-3xl"
         />
       </div>
       <div className="flex h-full w-1/3 items-center justify-end gap-4 p-4">
diff --git a/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx b/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
index 7f9ab7ce..70a7c1ef 100644
--- a/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
+++ b/skyvern-frontend/src/routes/workflows/editor/nodes/components/EditableNodeTitle.tsx
@@ -1,4 +1,10 @@
 import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/util/utils";
 import { useLayoutEffect, useRef } from "react";
 
@@ -29,33 +35,41 @@ function EditableNodeTitle({ value, editable, onChange, className }: Props) {
   }
 
   return (
-    <Input
-      disabled={!editable}
-      ref={ref}
-      className={cn("nopan w-fit min-w-fit max-w-64 border-0 px-0", className)}
-      onBlur={(event) => {
-        if (!editable) {
-          event.currentTarget.value = value;
-          return;
-        }
-        onChange(event.target.value);
-      }}
-      onKeyDown={(event) => {
-        if (!editable) {
-          return;
-        }
-        if (event.key === "Enter") {
-          event.currentTarget.blur();
-        }
-        if (event.key === "Escape") {
-          event.currentTarget.value = value;
-          event.currentTarget.blur();
-        }
-        setSize();
-      }}
-      onInput={setSize}
-      defaultValue={value}
-    />
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Input
+            disabled={!editable}
+            ref={ref}
+            size={1}
+            className={cn("nopan w-min border-0 p-0", className)}
+            onBlur={(event) => {
+              if (!editable) {
+                event.currentTarget.value = value;
+                return;
+              }
+              onChange(event.target.value);
+            }}
+            onKeyDown={(event) => {
+              if (!editable) {
+                return;
+              }
+              if (event.key === "Enter") {
+                event.currentTarget.blur();
+              }
+              if (event.key === "Escape") {
+                event.currentTarget.value = value;
+                event.currentTarget.blur();
+              }
+              setSize();
+            }}
+            onInput={setSize}
+            defaultValue={value}
+          />
+        </TooltipTrigger>
+        <TooltipContent>Click to edit</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }