Make multi section openable in task form (#897)

Co-authored-by: Muhammed Salih Altun <muhammedsalihaltun@gmail.com>

skyvern-frontend/src/routes/tasks/create/TaskFormSection.tsx

@@ -21,41 +21,35 @@ function TaskFormSection({
   const [hovering, setHovering] = useState(false);
 
   return (
-    <section
-      className={cn("space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5", {
-        "cursor-pointer": !active,
-      })}
-      onMouseOver={() => setHovering(true)}
-      onMouseOut={() => setHovering(false)}
-      onMouseEnter={() => setHovering(true)}
-      onMouseLeave={() => setHovering(false)}
-      onClick={() => onClick && onClick()}
-    >
+    <section className="space-y-8 rounded-lg bg-slate-elevation3 px-6 py-5">
       <header className="flex h-7 gap-4">
         <div
-          className={cn(
-            "flex w-7 items-center justify-center rounded-full border border-slate-400",
-            {
-              "bg-slate-400": hovering || active,
-              "border-destructive": !active && hasError,
-            },
-          )}
+          className="flex h-7 cursor-pointer gap-4"
+          onClick={() => onClick && onClick()}
+          onMouseEnter={() => setHovering(true)}
+          onMouseLeave={() => setHovering(false)}
+          onMouseOver={() => setHovering(true)}
+          onMouseOut={() => setHovering(false)}
         >
+          <div
+            className={cn(
+              "flex w-7 items-center justify-center rounded-full border border-slate-400",
+              {
+                "border-destructive": !active && hasError,
+                "bg-slate-400 text-slate-950": active || hovering,
+              },
+            )}
+          >
+            <span className={"text-slate-50"}>{String(index)}</span>
+          </div>
           <span
-            className={cn("text-slate-50", {
-              "text-slate-950": hovering || active,
+            className={cn("text-lg", {
+              "text-destructive": !active && hasError,
             })}
           >
-            {String(index)}
+            {title}
           </span>
         </div>
-        <span
-          className={cn("text-lg", {
-            "text-destructive": !active && hasError,
-          })}
-        >
-          {title}
-        </span>
       </header>
       {children}
     </section>