From 5017534e5c09d3fc6aa19ed611526294913bf692 Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Fri, 6 Mar 2026 14:19:25 +0530
Subject: [PATCH] fix: format

---
 .../components/core/image-picker-popover.tsx  | 13 +++----
 .../cycles/active-cycle/cycle-stats.tsx       | 36 +++++++++----------
 .../modal/card/base-paid-plan-card.tsx        |  2 +-
 .../pages/navigation-pane/tab-panels/root.tsx |  3 +-
 packages/propel/src/button/helper.tsx         |  4 +--
 5 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 4bdf629922..307e3fa2ce 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -197,7 +197,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
         <Popover.Panel className="absolute right-0 z-20 mt-2 rounded-md border border-subtle bg-surface-1 shadow-raised-200">
           <div
             ref={imagePickerRef}
-            className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 shadow-raised-200 md:h-[36rem] md:w-[36rem] p-2"
+            className="flex h-96 w-80 flex-col overflow-auto rounded border border-subtle bg-surface-1 p-2 shadow-raised-200 md:h-[36rem] md:w-[36rem]"
           >
             <Tabs>
               <TabsList>
@@ -211,7 +211,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                 <TabsContent value="unsplash">
                   {(unsplashImages || !unsplashError) && (
                     <>
-                      <div className="flex gap-x-2 items-center">
+                      <div className="flex items-center gap-x-2">
                         <Controller
                           control={control}
                           name="search"
@@ -230,7 +230,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                               onChange={(e) => setFormData({ ...formData, search: e.target.value })}
                               ref={ref}
                               placeholder="Search for images"
-                              className="w-full text-sm"
+                              className="text-sm w-full"
                             />
                           )}
                         />
@@ -259,7 +259,7 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                             ))}
                           </div>
                         ) : (
-                          <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
+                          <p className="text-xs text-custom-text-300 pt-7 text-center">No images found.</p>
                         )
                       ) : (
                         <Loader className="grid grid-cols-4 gap-4">
@@ -298,10 +298,11 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
                     <div className="flex w-full flex-1 items-center gap-3">
                       <div
                         {...getRootProps()}
-                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${(image === null && isDragActive) || !value
+                        className={`relative grid h-full w-full cursor-pointer place-items-center rounded-lg p-12 text-center focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 focus:outline-none ${
+                          (image === null && isDragActive) || !value
                             ? "border-2 border-dashed border-subtle hover:bg-surface-2"
                             : ""
-                          }`}
+                        }`}
                       >
                         <button
                           type="button"
diff --git a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
index 49b820d742..48d8312a30 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -92,7 +92,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
   );
 
   return cycleId ? (
-    <div className="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1 border border-subtle rounded-lg">
+    <div className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden rounded-lg border border-subtle bg-surface-1 p-4 lg:col-span-2 xl:col-span-1">
       <Tabs value={tab ?? "Priority-Issues"} onValueChange={setTab}>
         <TabsList>
           <TabsTrigger value="Priority-Issues">{t("project_cycles.active_cycle.priority_issue")}</TabsTrigger>
@@ -102,11 +102,11 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
         <TabsContent
           value="Priority-Issues"
-          className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
+          className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
         >
           <div
             ref={issuesContainerRef}
-            className="flex flex-col gap-1 h-full w-full overflow-y-auto vertical-scrollbar scrollbar-sm"
+            className="vertical-scrollbar flex scrollbar-sm h-full w-full flex-col gap-1 overflow-y-auto"
           >
             {cycleIssueDetails && "issueIds" in cycleIssueDetails ? (
               cycleIssueDetails.issueCount > 0 ? (
@@ -119,7 +119,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     return (
                       <div
                         key={issue.id}
-                        className="group flex cursor-pointer items-center justify-between gap-2 rounded-md hover:bg-surface-2 p-1"
+                        className="group flex cursor-pointer items-center justify-between gap-2 rounded-md p-1 hover:bg-surface-2"
                         onClick={() => {
                           if (issue.id) {
                             setPeekIssue({
@@ -132,14 +132,14 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                           }
                         }}
                       >
-                        <div className="flex items-center gap-1.5 flex-grow w-full min-w-24 truncate">
+                        <div className="flex w-full min-w-24 flex-grow items-center gap-1.5 truncate">
                           <IssueIdentifier issueId={issue.id} projectId={projectId} size="xs" variant="secondary" />
                           <Tooltip position="top-start" tooltipHeading="Title" tooltipContent={issue.name}>
-                            <span className="text-13 text-primary truncate">{issue.name}</span>
+                            <span className="truncate text-13 text-primary">{issue.name}</span>
                           </Tooltip>
                         </div>
                         <PriorityIcon priority={issue.priority} withContainer size={12} />
-                        <div className="flex items-center gap-1.5 flex-shrink-0">
+                        <div className="flex flex-shrink-0 items-center gap-1.5">
                           <StateDropdown
                             value={issue.state_id}
                             onChange={() => {}}
@@ -154,9 +154,9 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                               tooltipHeading="Target Date"
                               tooltipContent={renderFormattedDate(issue.target_date)}
                             >
-                              <div className="h-full flex truncate items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 bg-layer-1 group-hover:bg-surface-1 cursor-pointer">
+                              <div className="flex h-full cursor-pointer items-center gap-1.5 truncate rounded-sm bg-layer-1 px-2 py-0.5 text-11 group-hover:bg-surface-1">
                                 <CalendarCheck className="h-3 w-3 flex-shrink-0" />
-                                <span className="text-11 truncate">
+                                <span className="truncate text-11">
                                   {renderFormattedDateWithoutYear(issue.target_date)}
                                 </span>
                               </div>
@@ -170,13 +170,13 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                     <div
                       ref={setIssueLoaderElement}
                       className={
-                        "h-11 relative flex items-center gap-3 bg-layer-1 p-3 text-13 cursor-pointer animate-pulse"
+                        "relative flex h-11 animate-pulse cursor-pointer items-center gap-3 bg-layer-1 p-3 text-13"
                       }
                     />
                   )}
                 </>
               ) : (
-                <div className="flex items-center justify-center h-full w-full">
+                <div className="flex h-full w-full items-center justify-center">
                   <SimpleEmptyState
                     title={t("active_cycle.empty_state.priority_issue.title")}
                     assetPath={priorityResolvedPath}
@@ -191,7 +191,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
         <TabsContent
           value="Assignees"
-          className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
+          className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
         >
           {cycle && !isEmpty(cycle.distribution) ? (
             cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -239,7 +239,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                   );
               })
             ) : (
-              <div className="flex items-center justify-center h-full w-full">
+              <div className="flex h-full w-full items-center justify-center">
                 <SimpleEmptyState
                   title={t("active_cycle.empty_state.assignee.title")}
                   assetPath={assigneesResolvedPath}
@@ -253,7 +253,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
 
         <TabsContent
           value="Labels"
-          className="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
+          className="vertical-scrollbar flex scrollbar-sm h-52 w-full flex-col gap-1 overflow-y-auto text-secondary"
         >
           {cycle && !isEmpty(cycle.distribution) ? (
             cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
@@ -263,12 +263,12 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                   title={
                     <div className="flex items-center gap-2 truncate">
                       <span
-                        className="block h-3 w-3 rounded-full flex-shrink-0"
+                        className="block h-3 w-3 flex-shrink-0 rounded-full"
                         style={{
                           backgroundColor: label.color ?? "#000000",
                         }}
                       />
-                      <span className="text-11 text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
+                      <span className="truncate text-11 text-ellipsis">{label.label_name ?? "No labels"}</span>
                     </div>
                   }
                   completed={label.completed_issues}
@@ -285,7 +285,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
                 />
               ))
             ) : (
-              <div className="flex items-center justify-center h-full w-full">
+              <div className="flex h-full w-full items-center justify-center">
                 <SimpleEmptyState title={t("active_cycle.empty_state.label.title")} assetPath={labelsResolvedPath} />
               </div>
             )
@@ -296,7 +296,7 @@ export const ActiveCycleStats = observer(function ActiveCycleStats(props: Active
       </Tabs>
     </div>
   ) : (
-    <Loader className="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1">
+    <Loader className="col-span-1 flex min-h-[17rem] flex-col gap-4 overflow-hidden bg-surface-1 lg:col-span-2 xl:col-span-1">
       <Loader.Item width="100%" height="17rem" />
     </Loader>
   );
diff --git a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
index ac569e7a24..941ca84bb5 100644
--- a/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
+++ b/apps/web/core/components/license/modal/card/base-paid-plan-card.tsx
@@ -41,7 +41,7 @@ export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBaseP
   const planeName = getSubscriptionName(planVariant);
 
   return (
-    <div className="flex flex-col py-6 px-3 bg-layer-1 rounded-xl">
+    <div className="flex flex-col rounded-xl bg-layer-1 px-3 py-6">
       <Tabs value={selectedPlan} onValueChange={(value) => setSelectedPlan(value as TBillingFrequency)}>
         <div className="flex w-full justify-center">
           <TabsList>
diff --git a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
index 76a14cfd30..561cc99013 100644
--- a/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tab-panels/root.tsx
@@ -4,7 +4,6 @@
  * See the LICENSE file for details.
  */
 
-
 // plane imports
 import { TabsContent } from "@plane/propel/tabs";
 // components
@@ -33,7 +32,7 @@ export function PageNavigationPaneTabPanelsRoot(props: Props) {
         <TabsContent
           key={tab.key}
           value={tab.key}
-          className="size-full overflow-y-auto vertical-scrollbar scrollbar-sm outline-none"
+          className="vertical-scrollbar scrollbar-sm size-full overflow-y-auto outline-none"
         >
           {tab.key === "outline" && <PageNavigationPaneOutlineTabPanel page={page} />}
           {tab.key === "info" && <PageNavigationPaneInfoTabPanel page={page} versionHistory={versionHistory} />}
diff --git a/packages/propel/src/button/helper.tsx b/packages/propel/src/button/helper.tsx
index 9e332d55f0..18130b113c 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -17,9 +17,9 @@ export const buttonVariants = cva(
         "error-fill":
           "bg-danger-primary text-on-color hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled disabled:text-disabled",
         "error-outline":
-          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-secondary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+          "border border-danger-strong bg-layer-2 text-danger-secondary hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:border-subtle-1 disabled:bg-layer-2 disabled:text-disabled",
         secondary:
-          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+          "border border-strong bg-layer-2 text-secondary shadow-raised-100 hover:bg-layer-2-hover active:bg-layer-2-active disabled:border-subtle-1 disabled:bg-layer-transparent disabled:text-disabled",
         tertiary:
           "bg-layer-3 text-secondary hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent disabled:text-disabled",
         ghost: