Fix workflow title initial style (#838)

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">

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
+    <TooltipProvider>
-      disabled={!editable}
+      <Tooltip>
-      ref={ref}
+        <TooltipTrigger asChild>
-      className={cn("nopan w-fit min-w-fit max-w-64 border-0 px-0", className)}
+          <Input
-      onBlur={(event) => {
+            disabled={!editable}
-        if (!editable) {
+            ref={ref}
-          event.currentTarget.value = value;
+            size={1}
-          return;
+            className={cn("nopan w-min border-0 p-0", className)}
-        }
+            onBlur={(event) => {
-        onChange(event.target.value);
+              if (!editable) {
-      }}
+                event.currentTarget.value = value;
-      onKeyDown={(event) => {
+                return;
-        if (!editable) {
+              }
-          return;
+              onChange(event.target.value);
-        }
+            }}
-        if (event.key === "Enter") {
+            onKeyDown={(event) => {
-          event.currentTarget.blur();
+              if (!editable) {
-        }
+                return;
-        if (event.key === "Escape") {
+              }
-          event.currentTarget.value = value;
+              if (event.key === "Enter") {
-          event.currentTarget.blur();
+                event.currentTarget.blur();
-        }
+              }
-        setSize();
+              if (event.key === "Escape") {
-      }}
+                event.currentTarget.value = value;
-      onInput={setSize}
+                event.currentTarget.blur();
-      defaultValue={value}
+              }
-    />
+              setSize();
+            }}
+            onInput={setSize}
+            defaultValue={value}
+          />
+        </TooltipTrigger>
+        <TooltipContent>Click to edit</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }