Add tailwind plugin for prettier (#592)

skyvern-frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

skyvern-frontend/package-lock.json

@@ -62,6 +62,7 @@
         "lint-staged": "^15.2.2",
         "postcss": "^8.4.37",
         "prettier": "^3.2.5",
+        "prettier-plugin-tailwindcss": "^0.6.5",
         "tailwindcss": "^3.4.1",
         "typescript": "^5.5.3",
         "vite": "^5.1.6"
@@ -5319,6 +5320,80 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.5.tgz",
+      "integrity": "sha512-axfeOArc/RiGHjOIy9HytehlC0ZLeMaqY09mm8YCkMzznKiDkwFzOpBvtuhuv3xG5qB73+Mj7OCe2j/L1ryfuQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig-melody": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig-melody": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",

skyvern-frontend/package.json

@@ -70,6 +70,7 @@
     "lint-staged": "^15.2.2",
     "postcss": "^8.4.37",
     "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.3",
     "vite": "^5.1.6"

skyvern-frontend/src/components/FileUpload.tsx

@@ -99,7 +99,7 @@ function FileUpload({ value, onChange }: Props) {
           <Label
             htmlFor={inputId}
             className={cn(
-              "flex w-full cursor-pointer border border-dashed items-center justify-center py-8",
+              "flex w-full cursor-pointer items-center justify-center border border-dashed py-8",
               {
                 "border-slate-500": highlight,
               },
@@ -144,7 +144,7 @@ function FileUpload({ value, onChange }: Props) {
               accept=".csv"
               className="hidden"
             />
-            <div className="max-w-full truncate flex gap-2">
+            <div className="flex max-w-full gap-2 truncate">
               {uploadFileMutation.isPending && (
                 <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
               )}
@@ -156,7 +156,7 @@ function FileUpload({ value, onChange }: Props) {
             </div>
           </Label>
         </div>
-        <div className="flex flex-col items-center justify-center before:flex before:content-[''] before:bg-slate-600">
+        <div className="flex flex-col items-center justify-center before:flex before:bg-slate-600 before:content-['']">
           OR
         </div>
         <div className="w-1/2">
@@ -181,7 +181,7 @@ function FileUpload({ value, onChange }: Props) {
 
   if (typeof value === "string") {
     return (
-      <div className="flex gap-4 items-center">
+      <div className="flex items-center gap-4">
         <span>{value}</span>
         <Button onClick={() => reset()}>Change</Button>
       </div>
@@ -190,7 +190,7 @@ function FileUpload({ value, onChange }: Props) {
 
   if (typeof value === "object" && file && "s3uri" in value) {
     return (
-      <div className="flex gap-4 items-center">
+      <div className="flex items-center gap-4">
         <a href={value.presignedUrl} className="underline">
           <span>{file.name}</span>
         </a>

skyvern-frontend/src/components/ZoomableImage.tsx

@@ -38,7 +38,7 @@ function ZoomableImage(props: HTMLImageElementProps) {
       {modalOpen && (
         <div
           className={clsx(
-            "fixed inset-0 z-50 flex justify-center bg-black bg-opacity-75 overflow-auto p-16",
+            "fixed inset-0 z-50 flex justify-center overflow-auto bg-black bg-opacity-75 p-16",
             {
               "items-center": !zoom,
               "items-baseline": zoom,
@@ -46,7 +46,7 @@ function ZoomableImage(props: HTMLImageElementProps) {
           )}
         >
           <span
-            className="absolute top-4 right-4 text-white text-4xl cursor-pointer"
+            className="absolute right-4 top-4 cursor-pointer text-4xl text-white"
             onClick={closeModal}
           >
             &times;
@@ -55,9 +55,9 @@ function ZoomableImage(props: HTMLImageElementProps) {
             {...props}
             onClick={() => setZoom(!zoom)}
             className={clsx({
-              "min-h-full object-contain h-full w-full m-0 cursor-zoom-in max-h-full max-w-full":
+              "m-0 h-full max-h-full min-h-full w-full max-w-full cursor-zoom-in object-contain":
                 !zoom,
-              "min-h-full object-contain m-0 cursor-zoom-out max-w-none max-h-none mr-auto ml-auto":
+              "m-0 ml-auto mr-auto max-h-none min-h-full max-w-none cursor-zoom-out object-contain":
                 zoom,
             })}
           />

skyvern-frontend/src/components/ui/card.tsx

@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-4 bg-muted/40", className)}
+    className={cn("flex flex-col space-y-1.5 bg-muted/40 p-4", className)}
     {...props}
   />
 ));

skyvern-frontend/src/components/ui/hidden-copyable-input.tsx

@@ -17,7 +17,7 @@ function HiddenCopyableInput({ value }: Props) {
   return (
     <div className="relative w-full">
       <Input value={inputValue} className="h-10" readOnly />
-      <div className="absolute flex inset-y-0 items-center right-1">
+      <div className="absolute inset-y-0 right-1 flex items-center">
         <Button
           size="sm"
           variant="secondary"

skyvern-frontend/src/routes/root/Profile.tsx

@@ -7,8 +7,8 @@ type Props = {
 
 function Profile({ name }: Props) {
   return (
-    <div className="flex items-center border-2 p-2 rounded-lg">
+    <div className="flex items-center rounded-lg border-2 p-2">
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <PersonIcon className="h-4 w-4" />
         <p className="w-40 overflow-hidden text-ellipsis">{name}</p>
       </div>

skyvern-frontend/src/routes/root/RootLayout.tsx

@@ -13,8 +13,8 @@ function RootLayout() {
 
   return (
     <>
-      <div className="w-full h-full px-4">
+      <div className="h-full w-full px-4">
-        <aside className="fixed w-72 px-6 shrink-0 min-h-screen border-r-2">
+        <aside className="fixed min-h-screen w-72 shrink-0 border-r-2 px-6">
           <Link to={window.location.origin}>
             <div className="h-24">
               <Logo />
@@ -22,18 +22,18 @@ function RootLayout() {
           </Link>
           <SideNav />
           {user ? (
-            <div className="absolute bottom-2 left-0 w-72 px-6 shrink-0">
+            <div className="absolute bottom-2 left-0 w-72 shrink-0 px-6">
               <Profile name={user.name} />
             </div>
           ) : null}
         </aside>
-        <div className="pl-72 h-24 flex justify-end items-center px-6 gap-4">
+        <div className="flex h-24 items-center justify-end gap-4 px-6 pl-72">
           <Link
             to="https://discord.com/invite/fG2XXEuQX3"
             target="_blank"
             rel="noopener noreferrer"
           >
-            <DiscordLogoIcon className="w-7 h-7" />
+            <DiscordLogoIcon className="h-7 w-7" />
           </Link>
           <div className="h-7">
             <GitHubButton
@@ -47,7 +47,7 @@ function RootLayout() {
             </GitHubButton>
           </div>
         </div>
-        <main className="pl-72 pb-4">
+        <main className="pb-4 pl-72">
           <Outlet />
         </main>
       </div>

skyvern-frontend/src/routes/root/SideNav.tsx

@@ -13,45 +13,45 @@ function SideNav() {
       <NavLink
         to="create"
         className={({ isActive }) => {
-          return cn("flex items-center px-5 py-3 hover:bg-muted rounded-2xl", {
+          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
             "bg-muted": isActive,
           });
         }}
       >
-        <PlusCircledIcon className="mr-4 w-6 h-6" />
+        <PlusCircledIcon className="mr-4 h-6 w-6" />
         <span className="text-lg">Create</span>
       </NavLink>
       <NavLink
         to="tasks"
         className={({ isActive }) => {
-          return cn("flex items-center px-5 py-3 hover:bg-muted rounded-2xl", {
+          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
             "bg-muted": isActive,
           });
         }}
       >
-        <ListBulletIcon className="mr-4 w-6 h-6" />
+        <ListBulletIcon className="mr-4 h-6 w-6" />
         <span className="text-lg">Tasks</span>
       </NavLink>
       <NavLink
         to="workflows"
         className={({ isActive }) => {
-          return cn("flex items-center px-5 py-3 hover:bg-muted rounded-2xl", {
+          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
             "bg-muted": isActive,
           });
         }}
       >
-        <LightningBoltIcon className="mr-4 w-6 h-6" />
+        <LightningBoltIcon className="mr-4 h-6 w-6" />
         <span className="text-lg">Workflows (Beta)</span>
       </NavLink>
       <NavLink
         to="settings"
         className={({ isActive }) => {
-          return cn("flex items-center px-5 py-3 hover:bg-muted rounded-2xl", {
+          return cn("flex items-center rounded-2xl px-5 py-3 hover:bg-muted", {
             "bg-muted": isActive,
           });
         }}
       >
-        <GearIcon className="mr-4 w-6 h-6" />
+        <GearIcon className="mr-4 h-6 w-6" />
         <span className="text-lg">Settings</span>
       </NavLink>
     </nav>

skyvern-frontend/src/routes/settings/Settings.tsx

@@ -33,8 +33,8 @@ function Settings() {
         </CardHeader>
         <CardContent className="p-8">
           <div className="flex flex-col gap-4">
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
-              <Label className="whitespace-nowrap w-36">Environment</Label>
+              <Label className="w-36 whitespace-nowrap">Environment</Label>
               <Select value={environment} onValueChange={setEnvironment}>
                 <SelectTrigger>
                   <SelectValue placeholder="Environment" />
@@ -44,8 +44,8 @@ function Settings() {
                 </SelectContent>
               </Select>
             </div>
-            <div className="flex gap-4 items-center">
+            <div className="flex items-center gap-4">
-              <Label className="whitespace-nowrap w-36">Organization</Label>
+              <Label className="w-36 whitespace-nowrap">Organization</Label>
               <Select value={organization} onValueChange={setOrganization}>
                 <SelectTrigger>
                   <SelectValue placeholder="Organization" />

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

@@ -9,8 +9,8 @@ function CreateNewTaskFromPrompt() {
   return (
     <section className="space-y-8">
       <header className="flex flex-col gap-4">
-        <div className="flex gap-4 items-center">
+        <div className="flex items-center gap-4">
-          <MagicWandIcon className="w-6 h-6" />
+          <MagicWandIcon className="h-6 w-6" />
           <h1 className="text-3xl font-bold">Create New Task</h1>
         </div>
         <p>

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

@@ -75,8 +75,8 @@ function SavedTaskCard({ workflowId, title, url, description }: Props) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle className="flex justify-between items-center">
+        <CardTitle className="flex items-center justify-between">
-          <span className="overflow-hidden text-ellipsis whitespace-nowrap ">
+          <span className="overflow-hidden text-ellipsis whitespace-nowrap">
             {title}
           </span>
           <Dialog open={open} onOpenChange={setOpen}>
@@ -130,7 +130,7 @@ function SavedTaskCard({ workflowId, title, url, description }: Props) {
         </CardDescription>
       </CardHeader>
       <CardContent
-        className="h-48 overflow-scroll hover:bg-muted/40 cursor-pointer"
+        className="h-48 cursor-pointer overflow-scroll hover:bg-muted/40"
         onClick={() => {
           navigate(workflowId);
         }}

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

@@ -108,14 +108,14 @@ function SavedTasks() {
       >
         <CardHeader>
           <CardTitle>New Template</CardTitle>
-          <CardDescription className="whitespace-nowrap overflow-hidden text-ellipsis">
+          <CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
             Create your own template
           </CardDescription>
         </CardHeader>
-        <CardContent className="flex h-48 justify-center items-center hover:bg-muted/40 cursor-pointer">
+        <CardContent className="flex h-48 cursor-pointer items-center justify-center hover:bg-muted/40">
-          {!mutation.isPending && <PlusIcon className="w-12 h-12" />}
+          {!mutation.isPending && <PlusIcon className="h-12 w-12" />}
           {mutation.isPending && (
-            <ReloadIcon className="animate-spin w-12 h-12" />
+            <ReloadIcon className="h-12 w-12 animate-spin" />
           )}
         </CardContent>
       </Card>

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

@@ -97,7 +97,7 @@ function TaskTemplates() {
             href="https://meetings.hubspot.com/suchintan"
             target="_blank"
             rel="noopener noreferrer"
-            className="underline underline-offset-2 ml-auto"
+            className="ml-auto underline underline-offset-2"
           >
             Book a demo {"->"}
           </a>
@@ -105,25 +105,25 @@ function TaskTemplates() {
       </Alert>
       <section className="py-4">
         <header>
-          <h1 className="text-3xl mb-2">Try a prompt</h1>
+          <h1 className="mb-2 text-3xl">Try a prompt</h1>
         </header>
         <p className="text-sm">
           We will generate a task for you automatically.
         </p>
-        <Separator className="mt-2 mb-8" />
+        <Separator className="mb-8 mt-2" />
-        <div className="flex border rounded-xl items-center pr-4 max-w-xl mx-auto">
+        <div className="mx-auto flex max-w-xl items-center rounded-xl border pr-4">
           <Textarea
-            className="rounded-xl resize-none border-transparent hover:border-transparent focus-visible:ring-0 p-2 font-mono text-sm"
+            className="resize-none rounded-xl border-transparent p-2 font-mono text-sm hover:border-transparent focus-visible:ring-0"
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             placeholder="Enter your prompt..."
           />
           <div className="h-full">
             {getTaskFromPromptMutation.isPending ? (
-              <ReloadIcon className="w-6 h-6 animate-spin" />
+              <ReloadIcon className="h-6 w-6 animate-spin" />
             ) : (
               <PaperPlaneIcon
-                className="w-6 h-6 cursor-pointer"
+                className="h-6 w-6 cursor-pointer"
                 onClick={() => {
                   getTaskFromPromptMutation.mutate(prompt);
                 }}
@@ -131,12 +131,12 @@ function TaskTemplates() {
             )}
           </div>
         </div>
-        <div className="flex flex-wrap gap-4 mt-4 justify-center">
+        <div className="mt-4 flex flex-wrap justify-center gap-4">
           {examplePrompts.map((examplePrompt) => {
             return (
               <div
                 key={examplePrompt}
-                className="p-2 border rounded-xl cursor-pointer text-muted-foreground text-sm"
+                className="cursor-pointer rounded-xl border p-2 text-sm text-muted-foreground"
                 onClick={() => {
                   setPrompt(examplePrompt);
                 }}
@@ -151,18 +151,18 @@ function TaskTemplates() {
         <header>
           <h1 className="text-3xl">Your Templates</h1>
         </header>
-        <p className="text-sm mt-1">Your saved task templates</p>
+        <p className="mt-1 text-sm">Your saved task templates</p>
-        <Separator className="mt-2 mb-8" />
+        <Separator className="mb-8 mt-2" />
         <SavedTasks />
       </section>
       <section className="py-4">
         <header>
           <h1 className="text-3xl">Skyvern Templates</h1>
         </header>
-        <p className="text-sm mt-1">
+        <p className="mt-1 text-sm">
           Sample tasks that showcase Skyvern's capabilities
         </p>
-        <Separator className="mt-2 mb-8" />
+        <Separator className="mb-8 mt-2" />
         <div className="grid grid-cols-4 gap-4">
           {Object.entries(templateSamples).map(([sampleKey, sample]) => {
             return (
@@ -174,7 +174,7 @@ function TaskTemplates() {
                   </CardDescription>
                 </CardHeader>
                 <CardContent
-                  className="h-48 hover:bg-muted/40 cursor-pointer"
+                  className="h-48 cursor-pointer hover:bg-muted/40"
                   onClick={() => {
                     navigate(sampleKey);
                   }}

skyvern-frontend/src/routes/tasks/detail/ActionCard.tsx

@@ -18,7 +18,7 @@ function ActionCard({
   return (
     <div
       className={cn(
-        "flex p-4 rounded-lg shadow-md border hover:bg-muted cursor-pointer",
+        "flex cursor-pointer rounded-lg border p-4 shadow-md hover:bg-muted",
         {
           "bg-muted": selected,
         },

skyvern-frontend/src/routes/tasks/detail/ActionScreenshot.tsx

@@ -34,15 +34,15 @@ function ActionScreenshot({ stepId, index }: Props) {
 
   if (isFetching) {
     return (
-      <div className="max-h-[400px] flex flex-col mx-auto items-center gap-2 overflow-hidden">
+      <div className="mx-auto flex max-h-[400px] flex-col items-center gap-2 overflow-hidden">
-        <ReloadIcon className="animate-spin h-6 w-6" />
+        <ReloadIcon className="h-6 w-6 animate-spin" />
         <div>Loading screenshot...</div>
       </div>
     );
   }
 
   return screenshot ? (
-    <figure className="max-w-full flex flex-col mx-auto items-center gap-2 overflow-hidden">
+    <figure className="mx-auto flex max-w-full flex-col items-center gap-2 overflow-hidden">
       <ZoomableImage src={getImageURL(screenshot)} alt="llm-screenshot" />
     </figure>
   ) : (

skyvern-frontend/src/routes/tasks/detail/InputReasoningCard.tsx

@@ -6,7 +6,7 @@ type Props = {
 
 function InputReasoningCard({ input, reasoning, confidence }: Props) {
   return (
-    <div className="flex p-4 gap-2 rounded-md shadow-md border items-start">
+    <div className="flex items-start gap-2 rounded-md border p-4 shadow-md">
       <div className="flex-1">
         <div className="text-sm">
           <span className="font-bold">Agent Input:</span> {input}
@@ -15,7 +15,7 @@ function InputReasoningCard({ input, reasoning, confidence }: Props) {
           <span className="font-bold">Agent Reasoning:</span> {reasoning}
         </div>
       </div>
-      <div className="flex items-center justify-center border p-2 rounded-lg bg-muted">
+      <div className="flex items-center justify-center rounded-lg border bg-muted p-2">
         <span>Confidence: {confidence}</span>
       </div>
     </div>

skyvern-frontend/src/routes/tasks/detail/JSONArtifact.tsx

@@ -31,7 +31,7 @@ function JSONArtifact({ artifact }: Props) {
   });
 
   if (isFetching) {
-    return <Skeleton className="w-full h-48" />;
+    return <Skeleton className="h-48 w-full" />;
   }
 
   return (

skyvern-frontend/src/routes/tasks/detail/ScrollableActionList.tsx

@@ -77,7 +77,7 @@ function ScrollableActionList({
             refs.current[actionIndex] = element;
           }}
           className={cn(
-            "flex p-4 rounded-lg shadow-md border hover:border-slate-300 cursor-pointer",
+            "flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
             {
               "border-slate-300": selected,
             },
@@ -95,9 +95,9 @@ function ScrollableActionList({
             });
           }}
         >
-          <div className="flex-1 p-2 pt-0 space-y-2">
+          <div className="flex-1 space-y-2 p-2 pt-0">
             <div className="flex justify-between">
-              <div className="flex gap-2 items-center">
+              <div className="flex items-center gap-2">
                 <span>#{i + 1}</span>
                 <Badge>{ReadableActionTypes[action.type]}</Badge>
               </div>
@@ -113,9 +113,9 @@ function ScrollableActionList({
                   </TooltipProvider>
                 )}
                 {action.success ? (
-                  <CheckCircledIcon className="w-6 h-6 text-success" />
+                  <CheckCircledIcon className="h-6 w-6 text-success" />
                 ) : (
-                  <CrossCircledIcon className="w-6 h-6 text-destructive" />
+                  <CrossCircledIcon className="h-6 w-6 text-destructive" />
                 )}
               </div>
             </div>
@@ -123,7 +123,7 @@ function ScrollableActionList({
             <div className="text-sm">{action.reasoning}</div>
             {action.type === ActionTypes.InputText && (
               <>
-                <Separator className="bg-slate-50 block" />
+                <Separator className="block bg-slate-50" />
                 <div className="text-sm">Input: {action.input}</div>
               </>
             )}
@@ -138,8 +138,8 @@ function ScrollableActionList({
     typeof activeIndex === "number" ? data.length - activeIndex - 1 : "stream";
 
   return (
-    <div className="w-1/3 flex flex-col items-center border rounded h-[40rem]">
+    <div className="flex h-[40rem] w-1/3 flex-col items-center rounded border">
-      <div className="flex items-center text-sm p-4 gap-2">
+      <div className="flex items-center gap-2 p-4 text-sm">
         <Button
           size="icon"
           onClick={() => {
@@ -155,7 +155,7 @@ function ScrollableActionList({
           <ArrowDownIcon />
         </Button>
       </div>
-      <div className="overflow-y-scroll w-full px-4 pb-4 space-y-4">
+      <div className="w-full space-y-4 overflow-y-scroll px-4 pb-4">
         {showStreamOption && (
           <div
             key="stream"
@@ -163,15 +163,15 @@ function ScrollableActionList({
               refs.current[data.length] = element;
             }}
             className={cn(
-              "flex p-4 rounded-lg shadow-md border hover:border-slate-300 cursor-pointer",
+              "flex cursor-pointer rounded-lg border p-4 shadow-md hover:border-slate-300",
               {
                 "border-slate-300": activeIndex === "stream",
               },
             )}
             onClick={() => onActiveIndexChange("stream")}
           >
-            <div className="text-lg flex gap-2 items-center">
+            <div className="flex items-center gap-2 text-lg">
-              <DotFilledIcon className="w-6 h-6 text-red-500" />
+              <DotFilledIcon className="h-6 w-6 text-red-500" />
               Live
             </div>
           </div>

skyvern-frontend/src/routes/tasks/detail/StepArtifacts.tsx

@@ -80,7 +80,7 @@ function StepArtifacts({ id, stepProps }: Props) {
 
   return (
     <Tabs defaultValue="info" className="w-full">
-      <TabsList className="grid w-full h-16 grid-cols-5">
+      <TabsList className="grid h-16 w-full grid-cols-5">
         <TabsTrigger value="info">Info</TabsTrigger>
         <TabsTrigger value="screenshot_llm">Annotated Screenshots</TabsTrigger>
         <TabsTrigger value="screenshot_action">Action Screenshots</TabsTrigger>
@@ -126,16 +126,16 @@ function StepArtifacts({ id, stepProps }: Props) {
               <ZoomableImage
                 key={index}
                 src={getImageURL(artifact)}
-                className="object-cover w-full h-full"
+                className="h-full w-full object-cover"
                 alt="action-screenshot"
               />
             ))}
           </div>
         ) : isFetching ? (
           <div className="grid grid-cols-2 gap-4 p-4">
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
           </div>
         ) : (
           <div>No screenshots found</div>
@@ -148,16 +148,16 @@ function StepArtifacts({ id, stepProps }: Props) {
               <ZoomableImage
                 key={index}
                 src={getImageURL(artifact)}
-                className="object-cover w-full h-full"
+                className="h-full w-full object-cover"
                 alt="action-screenshot"
               />
             ))}
           </div>
         ) : isFetching ? (
           <div className="grid grid-cols-3 gap-4 p-4">
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
-            <Skeleton className="w-full h-full" />
+            <Skeleton className="h-full w-full" />
           </div>
         ) : (
           <div>No screenshots found</div>

skyvern-frontend/src/routes/tasks/detail/StepArtifactsLayout.tsx

@@ -40,7 +40,7 @@ function StepArtifactsLayout() {
           onActiveIndexChange={setActiveIndex}
         />
       </aside>
-      <main className="px-4 w-full">
+      <main className="w-full px-4">
         {activeStep ? (
           <StepArtifacts id={activeStep.step_id} stepProps={activeStep} />
         ) : null}

skyvern-frontend/src/routes/tasks/detail/StepNavigation.tsx

@@ -48,7 +48,7 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
         return (
           <div
             className={cn(
-              "flex items-center px-6 py-2 hover:bg-primary-foreground rounded-2xl cursor-pointer",
+              "flex cursor-pointer items-center rounded-2xl px-6 py-2 hover:bg-primary-foreground",
               {
                 "bg-primary-foreground": isActive,
               },
@@ -59,10 +59,10 @@ function StepNavigation({ activeIndex, onActiveIndexChange }: Props) {
             }}
           >
             {step.status === "completed" && (
-              <CheckboxIcon className="w-6 h-6 mr-2 text-green-500" />
+              <CheckboxIcon className="mr-2 h-6 w-6 text-green-500" />
             )}
             {step.status === "failed" && (
-              <CrossCircledIcon className="w-6 h-6 mr-2 text-red-500" />
+              <CrossCircledIcon className="mr-2 h-6 w-6 text-red-500" />
             )}
             <span>
               {step.retry_index > 0

skyvern-frontend/src/routes/tasks/detail/TaskActions.tsx

@@ -200,7 +200,7 @@ function TaskActions() {
   function getStream() {
     if (task?.status === Status.Queued) {
       return (
-        <div className="w-full h-full flex flex-col gap-4 items-center justify-center text-lg bg-slate-900">
+        <div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-slate-900 text-lg">
           <span>Your task is queued. Typical queue time is 1-2 minutes.</span>
           <span>Stream will start when the task is running.</span>
         </div>
@@ -209,7 +209,7 @@ function TaskActions() {
 
     if (task?.status === Status.Running && streamImgSrc.length === 0) {
       return (
-        <div className="w-full h-full flex items-center justify-center text-lg bg-slate-900">
+        <div className="flex h-full w-full items-center justify-center bg-slate-900 text-lg">
           Starting the stream...
         </div>
       );
@@ -217,7 +217,7 @@ function TaskActions() {
 
     if (task?.status === Status.Running && streamImgSrc.length > 0) {
       return (
-        <div className="w-full h-full">
+        <div className="h-full w-full">
           <img src={`data:image/png;base64,${streamImgSrc}`} />
         </div>
       );
@@ -227,8 +227,8 @@ function TaskActions() {
 
   return (
     <div className="flex gap-2">
-      <div className="w-2/3 border rounded">
+      <div className="w-2/3 rounded border">
-        <div className="p-4 w-full h-full">
+        <div className="h-full w-full p-4">
           {selectedAction === "stream" ? getStream() : null}
           {typeof selectedAction === "number" && activeAction ? (
             <ActionScreenshot

skyvern-frontend/src/routes/tasks/detail/TaskDetails.tsx

@@ -101,7 +101,7 @@ function TaskDetails() {
 
   return (
     <div className="flex flex-col gap-8">
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div className="flex items-center gap-4">
           <span className="text-lg">{taskId}</span>
           {taskId && <TaskInfo id={taskId} />}
@@ -141,8 +141,8 @@ function TaskDetails() {
       </div>
       {taskIsLoading ? (
         <div className="flex items-center gap-2">
-          <Skeleton className="w-32 h-32" />
+          <Skeleton className="h-32 w-32" />
-          <Skeleton className="w-full h-32" />
+          <Skeleton className="h-32 w-full" />
         </div>
       ) : (
         <>
@@ -150,13 +150,13 @@ function TaskDetails() {
           {failureReason}
         </>
       )}
-      <div className="flex justify-center items-center">
+      <div className="flex items-center justify-center">
-        <div className="inline-flex border rounded bg-muted p-1">
+        <div className="inline-flex rounded border bg-muted p-1">
           <NavLink
             to="actions"
             className={({ isActive }) => {
               return cn(
-                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
                 {
                   "bg-primary-foreground text-foreground": isActive,
                 },
@@ -169,7 +169,7 @@ function TaskDetails() {
             to="recording"
             className={({ isActive }) => {
               return cn(
-                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
                 {
                   "bg-primary-foreground text-foreground": isActive,
                 },
@@ -182,7 +182,7 @@ function TaskDetails() {
             to="parameters"
             className={({ isActive }) => {
               return cn(
-                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
                 {
                   "bg-primary-foreground text-foreground": isActive,
                 },
@@ -195,7 +195,7 @@ function TaskDetails() {
             to="diagnostics"
             className={({ isActive }) => {
               return cn(
-                "cursor-pointer px-2 py-1 rounded-md text-muted-foreground",
+                "cursor-pointer rounded-md px-2 py-1 text-muted-foreground",
                 {
                   "bg-primary-foreground text-foreground": isActive,
                 },

skyvern-frontend/src/routes/tasks/detail/TaskInfo.tsx

@@ -47,10 +47,10 @@ function TaskInfo({ id }: Props) {
   if (stepsIsLoading || taskIsLoading) {
     return (
       <div className="flex gap-4">
-        <Skeleton className="w-20 h-6" />
+        <Skeleton className="h-6 w-20" />
-        <Skeleton className="w-20 h-6" />
+        <Skeleton className="h-6 w-20" />
-        <Skeleton className="w-20 h-6" />
+        <Skeleton className="h-6 w-20" />
-        <Skeleton className="w-20 h-6" />
+        <Skeleton className="h-6 w-20" />
       </div>
     );
   }

skyvern-frontend/src/routes/tasks/detail/TaskRecording.tsx

@@ -24,8 +24,8 @@ function TaskRecording() {
 
   if (taskIsFetching) {
     return (
-      <div className="flex mx-auto">
+      <div className="mx-auto flex">
-        <div className="w-[800px] h-[450px]">
+        <div className="h-[450px] w-[800px]">
           <Skeleton className="h-full" />
         </div>
       </div>
@@ -37,7 +37,7 @@ function TaskRecording() {
   }
 
   return (
-    <div className="flex mx-auto">
+    <div className="mx-auto flex">
       {task.recording_url ? (
         <video width={800} height={450} src={getRecordingURL(task)} controls />
       ) : (

skyvern-frontend/src/routes/tasks/detail/TextArtifact.tsx

@@ -29,7 +29,7 @@ function TextArtifact({ artifact }: Props) {
   });
 
   if (isFetching) {
-    return <Skeleton className="w-full h-48" />;
+    return <Skeleton className="h-48 w-full" />;
   }
 
   return (

skyvern-frontend/src/routes/tasks/list/TaskHistory.tsx

@@ -105,7 +105,7 @@ function TaskHistory() {
                       {task.task_id}
                     </TableCell>
                     <TableCell
-                      className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
+                      className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
                       onClick={(event) => handleNavigate(event, task.task_id)}
                     >
                       {task.request.url}

skyvern-frontend/src/routes/tasks/list/TaskListSkeletonRows.tsx

@@ -8,16 +8,16 @@ function TaskListSkeletonRows() {
     return (
       <TableRow key={index}>
         <TableCell className="w-1/3">
-          <Skeleton className="w-full h-6" />
+          <Skeleton className="h-6 w-full" />
         </TableCell>
         <TableCell className="w-1/4">
-          <Skeleton className="w-full h-6" />
+          <Skeleton className="h-6 w-full" />
         </TableCell>
         <TableCell className="w-1/3">
-          <Skeleton className="w-full h-6" />
+          <Skeleton className="h-6 w-full" />
         </TableCell>
         <TableCell className="w-1/12">
-          <Skeleton className="w-full h-6" />
+          <Skeleton className="h-6 w-full" />
         </TableCell>
       </TableRow>
     );

skyvern-frontend/src/routes/tasks/running/LatestScreenshot.tsx

@@ -65,7 +65,7 @@ function LatestScreenshot({ id }: Props) {
   });
 
   if (isFetching && !artifact) {
-    return <Skeleton className="w-full h-full" />;
+    return <Skeleton className="h-full w-full" />;
   }
 
   if (isError || !artifact) {
@@ -75,7 +75,7 @@ function LatestScreenshot({ id }: Props) {
   return (
     <img
       src={getImageURL(artifact)}
-      className="w-full h-full object-contain"
+      className="h-full w-full object-contain"
       alt="Latest screenshot"
     />
   );

skyvern-frontend/src/routes/tasks/running/QueuedTasks.tsx

@@ -69,7 +69,7 @@ function QueuedTasks() {
                   onClick={(event) => handleNavigate(event, task.task_id)}
                 >
                   <TableCell className="w-1/4">{task.task_id}</TableCell>
-                  <TableCell className="w-1/4 max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis">
+                  <TableCell className="w-1/4 max-w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">
                     {task.request.url}
                   </TableCell>
                   <TableCell className="w-1/4">

skyvern-frontend/src/routes/tasks/running/RunningTasks.tsx

@@ -52,19 +52,19 @@ function RunningTasks() {
     return (
       <Card
         key={task.task_id}
-        className="hover:bg-muted/50 cursor-pointer"
+        className="cursor-pointer hover:bg-muted/50"
         onClick={(event) => handleNavigate(event, task.task_id)}
       >
         <CardHeader>
           <CardTitle className="overflow-hidden text-ellipsis whitespace-nowrap">
             {task.task_id}
           </CardTitle>
-          <CardDescription className="whitespace-nowrap overflow-hidden text-ellipsis">
+          <CardDescription className="overflow-hidden text-ellipsis whitespace-nowrap">
             {task.request.url}
           </CardDescription>
         </CardHeader>
         <CardContent className="flex items-center justify-center">
-          <div className="w-40 h-40">
+          <div className="h-40 w-40">
             <LatestScreenshot id={task.task_id} />
           </div>
         </CardContent>

skyvern-frontend/src/routes/workflows/RunWorkflowForm.tsx

@@ -141,7 +141,7 @@ function RunWorkflowForm({ workflowParameters, initialValues }: Props) {
           })}
           <Button type="submit" disabled={runWorkflowMutation.isPending}>
             {runWorkflowMutation.isPending && (
-              <ReloadIcon className="mr-2 w-4 h-4 animate-spin" />
+              <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />
             )}
             Run workflow
           </Button>

skyvern-frontend/src/routes/workflows/WorkflowRun.tsx

@@ -65,7 +65,7 @@ function WorkflowRun() {
       <header className="flex gap-2">
         <h1 className="text-lg font-semibold">{workflowRunId}</h1>
         {workflowRunIsLoading ? (
-          <Skeleton className="w-28 h-8" />
+          <Skeleton className="h-8 w-28" />
         ) : workflowRun ? (
           <StatusBadge status={workflowRun?.status} />
         ) : null}
@@ -105,7 +105,7 @@ function WorkflowRun() {
                         {task.task_id}
                       </TableCell>
                       <TableCell
-                        className="w-1/4 cursor-pointer max-w-64 overflow-hidden whitespace-nowrap overflow-ellipsis"
+                        className="w-1/4 max-w-64 cursor-pointer overflow-hidden overflow-ellipsis whitespace-nowrap"
                         onClick={(event) => handleNavigate(event, task.task_id)}
                       >
                         {task.request.url}

skyvern-frontend/src/routes/workflows/WorkflowTitle.tsx

@@ -26,7 +26,7 @@ function WorkflowTitle({ workflowPermanentId }: Props) {
   });
 
   if (isLoading) {
-    return <Skeleton className="w-full h-6" />;
+    return <Skeleton className="h-6 w-full" />;
   }
 
   if (isError || !workflow) {

skyvern-frontend/src/routes/workflows/WorkflowsBetaAlertCard.tsx

@@ -2,9 +2,9 @@ import { Button } from "@/components/ui/button";
 
 function WorkflowsBetaAlertCard() {
   return (
-    <div className="shadow rounded-lg bg-slate-900 flex flex-col items-center p-4">
+    <div className="flex flex-col items-center rounded-lg bg-slate-900 p-4 shadow">
       <header>
-        <h1 className="text-3xl py-4">Workflows (Beta)</h1>
+        <h1 className="py-4 text-3xl">Workflows (Beta)</h1>
       </header>
       <div>Workflows through UI are currently under construction.</div>
       <div>