From 6356f9c41d749d3cc63787d79d3ad1141703d9c7 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Fri, 29 Aug 2025 14:48:14 -0400
Subject: [PATCH] chore: lint unraid ui (#1638)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- New Features
- Fullscreen dialogs now use dedicated open/close animations for
smoother transitions.

- UX
- Added a “Loading Notifications...” message while notifications are
being fetched.

- Style
- Standardized Tailwind utility class ordering across numerous
components for consistent styling; no functional or visual changes
expected.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 unraid-ui/src/components/brand/BrandButton.vue |  6 +++---
 .../src/components/common/dialog/Dialog.vue    |  2 +-
 .../src/components/common/loading/Bar.vue      |  2 +-
 .../src/components/common/loading/Error.vue    |  4 ++--
 .../src/components/common/loading/Spinner.vue  |  2 +-
 .../common/popover/PopoverContent.vue          |  2 +-
 .../common/scroll-area/ScrollBar.vue           |  4 ++--
 .../components/common/sheet/SheetContent.vue   |  6 +++---
 .../common/sheet/SheetDescription.vue          |  2 +-
 .../src/components/common/sheet/SheetTitle.vue |  2 +-
 .../common/stepper/StepperDescription.vue      |  2 +-
 .../common/stepper/StepperIndicator.vue        |  2 +-
 .../common/stepper/StepperSeparator.vue        |  2 +-
 .../common/stepper/StepperTrigger.vue          |  2 +-
 .../src/components/common/tabs/TabsContent.vue |  2 +-
 .../src/components/common/tabs/TabsList.vue    |  2 +-
 .../src/components/common/tabs/TabsTrigger.vue |  2 +-
 .../common/tooltip/TooltipContent.vue          |  2 +-
 .../components/form/combobox/ComboboxGroup.vue |  4 ++--
 .../components/form/combobox/ComboboxInput.vue |  2 +-
 .../components/form/combobox/ComboboxItem.vue  |  2 +-
 .../components/form/combobox/ComboboxList.vue  |  2 +-
 .../form/combobox/ComboboxSeparator.vue        |  2 +-
 unraid-ui/src/components/form/input/Input.vue  |  2 +-
 unraid-ui/src/components/form/label/Label.vue  |  2 +-
 .../form/lightswitch/Lightswitch.vue           |  2 +-
 .../src/components/form/number/NumberField.vue |  2 +-
 .../form/number/NumberFieldContent.vue         |  2 +-
 .../form/number/NumberFieldDecrement.vue       |  2 +-
 .../form/number/NumberFieldIncrement.vue       |  2 +-
 .../form/number/NumberFieldInput.vue           |  2 +-
 .../src/components/form/switch/Switch.vue      |  4 ++--
 .../src/components/layout/CardWrapper.vue      |  6 +++---
 .../src/components/layout/PageContainer.vue    |  2 +-
 .../src/components/layout/SettingsGrid.vue     |  2 +-
 .../ui/accordion/AccordionContent.vue          |  4 ++--
 .../src/components/ui/dialog/DialogContent.vue |  8 ++++----
 .../components/ui/dialog/DialogDescription.vue |  2 +-
 .../ui/dialog/DialogScrollContent.vue          |  8 ++++----
 .../src/components/ui/dialog/DialogTitle.vue   |  2 +-
 .../dropdown-menu/DropdownMenuCheckboxItem.vue |  4 ++--
 .../ui/dropdown-menu/DropdownMenuContent.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue      |  2 +-
 .../ui/dropdown-menu/DropdownMenuRadioItem.vue |  2 +-
 .../ui/dropdown-menu/DropdownMenuSeparator.vue |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue   |  2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue   |  2 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue   |  2 +-
 .../src/components/ui/select/SelectContent.vue |  2 +-
 .../src/components/ui/select/SelectGroup.vue   |  2 +-
 .../src/components/ui/select/SelectItem.vue    |  2 +-
 .../src/components/ui/select/SelectLabel.vue   |  2 +-
 .../components/ui/select/SelectSeparator.vue   |  2 +-
 .../src/components/ui/select/SelectTrigger.vue |  4 ++--
 unraid-ui/src/forms/AccordionLayout.vue        |  8 ++++----
 unraid-ui/src/forms/ComboBoxField.vue          |  6 +++---
 unraid-ui/src/forms/FormErrors.vue             |  2 +-
 unraid-ui/src/forms/HorizontalLayout.vue       |  2 +-
 unraid-ui/src/forms/LabelRenderer.vue          |  2 +-
 unraid-ui/src/forms/MultiSelect.vue            | 16 ++++++++--------
 unraid-ui/src/forms/ObjectArrayField.vue       | 18 +++++++++---------
 unraid-ui/src/forms/PreconditionsLabel.vue     |  4 ++--
 unraid-ui/src/forms/SteppedLayout.vue          |  4 ++--
 unraid-ui/src/forms/StringArrayField.vue       |  2 +-
 64 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/unraid-ui/src/components/brand/BrandButton.vue b/unraid-ui/src/components/brand/BrandButton.vue
index 2d878d394..abc881889 100644
--- a/unraid-ui/src/components/brand/BrandButton.vue
+++ b/unraid-ui/src/components/brand/BrandButton.vue
@@ -70,14 +70,14 @@ const needsBrandGradientBackground = computed(() => {
   >
     <div
       v-if="variant === 'fill'"
-      class="absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange opacity-100 transition-all rounded-md group-hover:!opacity-60 group-focus:!opacity-60"
+      class="from-unraid-red to-orange absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 rounded-md bg-linear-to-r opacity-100 transition-all group-hover:!opacity-60 group-focus:!opacity-60"
     />
 
     <!-- gives outline buttons the brand gradient background -->
     <div
       v-if="needsBrandGradientBackground"
       :class="[
-        'absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r from-unraid-red to-orange transition-all pointer-events-none',
+        'from-unraid-red to-orange pointer-events-none absolute -top-[2px] -right-[2px] -bottom-[2px] -left-[2px] -z-10 bg-linear-to-r transition-all',
         variant === 'outline-primary' ? 'rounded-sm' : 'rounded-md',
         'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100',
       ]"
@@ -99,7 +99,7 @@ const needsBrandGradientBackground = computed(() => {
       :class="[
         classes.icon,
         iconRightHoverDisplay &&
-          'opacity-0 group-hover:!opacity-100 group-focus:!opacity-100 transition-all',
+          'opacity-0 transition-all group-hover:!opacity-100 group-focus:!opacity-100',
       ]"
       :style="{ '--icon-size': classes.iconSize }"
     />
diff --git a/unraid-ui/src/components/common/dialog/Dialog.vue b/unraid-ui/src/components/common/dialog/Dialog.vue
index 0e82e35cf..6da002b47 100644
--- a/unraid-ui/src/components/common/dialog/Dialog.vue
+++ b/unraid-ui/src/components/common/dialog/Dialog.vue
@@ -83,7 +83,7 @@ const sizeClasses = {
         cn(
           sizeClasses[size],
           size === 'full'
-            ? 'fixed inset-0 translate-x-0 translate-y-0 max-w-none rounded-none border-0'
+            ? 'fixed inset-0 max-w-none translate-x-0 translate-y-0 rounded-none border-0'
             : ''
         )
       "
diff --git a/unraid-ui/src/components/common/loading/Bar.vue b/unraid-ui/src/components/common/loading/Bar.vue
index f2ed64c79..44cbafd58 100644
--- a/unraid-ui/src/components/common/loading/Bar.vue
+++ b/unraid-ui/src/components/common/loading/Bar.vue
@@ -5,7 +5,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
 </script>
 <template>
   <div
-    :class="cn('h-5 animate-pulse bg-gray-300 w-full', props.class)"
+    :class="cn('h-5 w-full animate-pulse bg-gray-300', props.class)"
     role="progressbar"
     aria-label="Loading"
   />
diff --git a/unraid-ui/src/components/common/loading/Error.vue b/unraid-ui/src/components/common/loading/Error.vue
index 78bca4eb5..ebeae9233 100644
--- a/unraid-ui/src/components/common/loading/Error.vue
+++ b/unraid-ui/src/components/common/loading/Error.vue
@@ -34,7 +34,7 @@ const props = withDefaults(
 defineEmits(['retry']);
 </script>
 <template>
-  <div :class="cn('h-full flex flex-col items-center justify-center gap-3', props.class)">
+  <div :class="cn('flex h-full flex-col items-center justify-center gap-3', props.class)">
     <!-- Loading State -->
     <div v-if="loading" class="contents">
       <LoadingSpinner />
@@ -43,7 +43,7 @@ defineEmits(['retry']);
     <!-- Error State -->
     <div v-else-if="error" class="space-y-3">
       <div class="flex justify-center">
-        <ShieldExclamationIcon class="h-10 text-unraid-red" />
+        <ShieldExclamationIcon class="text-unraid-red h-10" />
       </div>
       <div>
         <h3 class="font-bold">{{ `Error` }}</h3>
diff --git a/unraid-ui/src/components/common/loading/Spinner.vue b/unraid-ui/src/components/common/loading/Spinner.vue
index 9d1c0acf0..a2b244e2f 100644
--- a/unraid-ui/src/components/common/loading/Spinner.vue
+++ b/unraid-ui/src/components/common/loading/Spinner.vue
@@ -8,7 +8,7 @@ const props = withDefaults(defineProps<{ class?: string }>(), { class: '' });
   <div
     :class="
       cn(
-        'inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] text-primary motion-reduce:animate-[spin_1.5s_linear_infinite]',
+        'text-primary inline-block h-8 w-8 animate-spin rounded-full border-2 border-solid border-current border-e-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/common/popover/PopoverContent.vue b/unraid-ui/src/components/common/popover/PopoverContent.vue
index 82cf50162..50ac62757 100644
--- a/unraid-ui/src/components/common/popover/PopoverContent.vue
+++ b/unraid-ui/src/components/common/popover/PopoverContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md p-4 shadow-md outline-hidden',
           props.class
         )
       "
diff --git a/unraid-ui/src/components/common/scroll-area/ScrollBar.vue b/unraid-ui/src/components/common/scroll-area/ScrollBar.vue
index e9b0df231..641e644bf 100644
--- a/unraid-ui/src/components/common/scroll-area/ScrollBar.vue
+++ b/unraid-ui/src/components/common/scroll-area/ScrollBar.vue
@@ -23,13 +23,13 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex touch-none select-none transition-colors',
+        'flex touch-none transition-colors select-none',
         orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
         orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
         props.class
       )
     "
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaThumb class="bg-border relative flex-1 rounded-full" />
   </ScrollAreaScrollbar>
 </template>
diff --git a/unraid-ui/src/components/common/sheet/SheetContent.vue b/unraid-ui/src/components/common/sheet/SheetContent.vue
index 8e29a25fc..0208b05c4 100644
--- a/unraid-ui/src/components/common/sheet/SheetContent.vue
+++ b/unraid-ui/src/components/common/sheet/SheetContent.vue
@@ -46,14 +46,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 <template>
   <DialogPortal :disabled="disabled" :force-mount="forceMount" :to="teleportTarget">
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/60"
     />
     <DialogContent :class="sheetClass" v-bind="forwarded">
       <slot />
       <DialogClose
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <X class="w-4 h-4 text-muted-foreground" />
+        <X class="text-muted-foreground h-4 w-4" />
       </DialogClose>
     </DialogContent>
   </DialogPortal>
diff --git a/unraid-ui/src/components/common/sheet/SheetDescription.vue b/unraid-ui/src/components/common/sheet/SheetDescription.vue
index f4553fe57..af3ffff02 100644
--- a/unraid-ui/src/components/common/sheet/SheetDescription.vue
+++ b/unraid-ui/src/components/common/sheet/SheetDescription.vue
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DialogDescription :class="cn('text-sm text-muted-foreground', props.class)" v-bind="delegatedProps">
+  <DialogDescription :class="cn('text-muted-foreground text-sm', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogDescription>
 </template>
diff --git a/unraid-ui/src/components/common/sheet/SheetTitle.vue b/unraid-ui/src/components/common/sheet/SheetTitle.vue
index d50ff1801..3ff2ebc8e 100644
--- a/unraid-ui/src/components/common/sheet/SheetTitle.vue
+++ b/unraid-ui/src/components/common/sheet/SheetTitle.vue
@@ -13,7 +13,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <DialogTitle :class="cn('text-lg font-medium text-foreground', props.class)" v-bind="delegatedProps">
+  <DialogTitle :class="cn('text-foreground text-lg font-medium', props.class)" v-bind="delegatedProps">
     <slot />
   </DialogTitle>
 </template>
diff --git a/unraid-ui/src/components/common/stepper/StepperDescription.vue b/unraid-ui/src/components/common/stepper/StepperDescription.vue
index 2b4481c22..9f5b194a7 100644
--- a/unraid-ui/src/components/common/stepper/StepperDescription.vue
+++ b/unraid-ui/src/components/common/stepper/StepperDescription.vue
@@ -19,7 +19,7 @@ const forwarded = useForwardProps(delegatedProps);
   <StepperDescription
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="cn('text-xs text-muted-foreground', props.class)"
+    :class="cn('text-muted-foreground text-xs', props.class)"
   >
     <slot v-bind="slotProps" />
   </StepperDescription>
diff --git a/unraid-ui/src/components/common/stepper/StepperIndicator.vue b/unraid-ui/src/components/common/stepper/StepperIndicator.vue
index eb6f6f9fa..c2bba084c 100644
--- a/unraid-ui/src/components/common/stepper/StepperIndicator.vue
+++ b/unraid-ui/src/components/common/stepper/StepperIndicator.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
+        'text-muted-foreground/50 inline-flex h-10 w-10 items-center justify-center rounded-full',
         // Disabled
         'group-data-disabled:text-muted-foreground group-data-disabled:opacity-50',
         // Active
diff --git a/unraid-ui/src/components/common/stepper/StepperSeparator.vue b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
index 263c32749..8294b8fe0 100644
--- a/unraid-ui/src/components/common/stepper/StepperSeparator.vue
+++ b/unraid-ui/src/components/common/stepper/StepperSeparator.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'hidden md:block bg-muted md:w-24 md:h-px md:my-0',
+        'bg-muted hidden md:my-0 md:block md:h-px md:w-24',
         // Disabled
         'group-data-disabled:bg-muted group-data-disabled:opacity-75',
         // Completed
diff --git a/unraid-ui/src/components/common/stepper/StepperTrigger.vue b/unraid-ui/src/components/common/stepper/StepperTrigger.vue
index 3d6da7ab0..81b92b170 100644
--- a/unraid-ui/src/components/common/stepper/StepperTrigger.vue
+++ b/unraid-ui/src/components/common/stepper/StepperTrigger.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'flex flex-col items-center justify-center text-center gap-2 rounded-md w-full md:w-auto',
+        'flex w-full flex-col items-center justify-center gap-2 rounded-md text-center md:w-auto',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/common/tabs/TabsContent.vue b/unraid-ui/src/components/common/tabs/TabsContent.vue
index f72fe0dec..cfacbb069 100644
--- a/unraid-ui/src/components/common/tabs/TabsContent.vue
+++ b/unraid-ui/src/components/common/tabs/TabsContent.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'flex mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+        'ring-offset-background focus-visible:ring-ring mt-2 flex focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/common/tabs/TabsList.vue b/unraid-ui/src/components/common/tabs/TabsList.vue
index fe01f54b9..4937ffb72 100644
--- a/unraid-ui/src/components/common/tabs/TabsList.vue
+++ b/unraid-ui/src/components/common/tabs/TabsList.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center rounded-md bg-input p-1.5 text-foreground',
+        'bg-input text-foreground inline-flex items-center justify-center rounded-md p-1.5',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/common/tabs/TabsTrigger.vue b/unraid-ui/src/components/common/tabs/TabsTrigger.vue
index 6f7d27917..41dcd1c72 100644
--- a/unraid-ui/src/components/common/tabs/TabsTrigger.vue
+++ b/unraid-ui/src/components/common/tabs/TabsTrigger.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded px-4.5 py-2.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs',
+        'ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center rounded px-4.5 py-2.5 text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xs',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/common/tooltip/TooltipContent.vue b/unraid-ui/src/components/common/tooltip/TooltipContent.vue
index eb9e711a3..cd3bfd4df 100644
--- a/unraid-ui/src/components/common/tooltip/TooltipContent.vue
+++ b/unraid-ui/src/components/common/tooltip/TooltipContent.vue
@@ -38,7 +38,7 @@ const { teleportTarget } = useTeleport();
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
           props.class
         )
       "
diff --git a/unraid-ui/src/components/form/combobox/ComboboxGroup.vue b/unraid-ui/src/components/form/combobox/ComboboxGroup.vue
index 184a54343..d214cd94a 100644
--- a/unraid-ui/src/components/form/combobox/ComboboxGroup.vue
+++ b/unraid-ui/src/components/form/combobox/ComboboxGroup.vue
@@ -23,12 +23,12 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
         props.class
       )
     "
   >
-    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+    <ComboboxLabel v-if="heading" class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
       {{ heading }}
     </ComboboxLabel>
     <slot />
diff --git a/unraid-ui/src/components/form/combobox/ComboboxInput.vue b/unraid-ui/src/components/form/combobox/ComboboxInput.vue
index 1a8c44c0b..d927d0b0a 100644
--- a/unraid-ui/src/components/form/combobox/ComboboxInput.vue
+++ b/unraid-ui/src/components/form/combobox/ComboboxInput.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/combobox/ComboboxItem.vue b/unraid-ui/src/components/form/combobox/ComboboxItem.vue
index 29df71ae5..f29f57bba 100644
--- a/unraid-ui/src/components/form/combobox/ComboboxItem.vue
+++ b/unraid-ui/src/components/form/combobox/ComboboxItem.vue
@@ -21,7 +21,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+        'data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/combobox/ComboboxList.vue b/unraid-ui/src/components/form/combobox/ComboboxList.vue
index 47039b838..0936a1145 100644
--- a/unraid-ui/src/components/form/combobox/ComboboxList.vue
+++ b/unraid-ui/src/components/form/combobox/ComboboxList.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-[200px] rounded-md border shadow-md outline-hidden',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class
diff --git a/unraid-ui/src/components/form/combobox/ComboboxSeparator.vue b/unraid-ui/src/components/form/combobox/ComboboxSeparator.vue
index e4b5cddcc..7b804c1a3 100644
--- a/unraid-ui/src/components/form/combobox/ComboboxSeparator.vue
+++ b/unraid-ui/src/components/form/combobox/ComboboxSeparator.vue
@@ -14,7 +14,7 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
+  <ComboboxSeparator v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
     <slot />
   </ComboboxSeparator>
 </template>
diff --git a/unraid-ui/src/components/form/input/Input.vue b/unraid-ui/src/components/form/input/Input.vue
index 8280abc6b..3fe7fa0bb 100644
--- a/unraid-ui/src/components/form/input/Input.vue
+++ b/unraid-ui/src/components/form/input/Input.vue
@@ -24,7 +24,7 @@ const modelValue = useVModel(props, 'modelValue', emits, {
     v-model="modelValue"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/label/Label.vue b/unraid-ui/src/components/form/label/Label.vue
index ab996e2e2..efb5c50b7 100644
--- a/unraid-ui/src/components/form/label/Label.vue
+++ b/unraid-ui/src/components/form/label/Label.vue
@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
     v-bind="delegatedProps"
     :class="
       cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/lightswitch/Lightswitch.vue b/unraid-ui/src/components/form/lightswitch/Lightswitch.vue
index 644b3ccdf..bc9d465ff 100644
--- a/unraid-ui/src/components/form/lightswitch/Lightswitch.vue
+++ b/unraid-ui/src/components/form/lightswitch/Lightswitch.vue
@@ -18,7 +18,7 @@ const checked = ref(false);
         v-model="checked"
         :class="[
           checked ? 'bg-green-500' : 'bg-gray-200',
-          'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-hidden focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
+          'relative inline-flex h-6 w-[44px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:outline-hidden',
         ]"
       >
         <span
diff --git a/unraid-ui/src/components/form/number/NumberField.vue b/unraid-ui/src/components/form/number/NumberField.vue
index bad257570..f1465d278 100644
--- a/unraid-ui/src/components/form/number/NumberField.vue
+++ b/unraid-ui/src/components/form/number/NumberField.vue
@@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <NumberFieldRoot v-bind="forwarded" :class="cn('grid gap-1.5 relative', props.class)">
+  <NumberFieldRoot v-bind="forwarded" :class="cn('relative grid gap-1.5', props.class)">
     <slot />
   </NumberFieldRoot>
 </template>
diff --git a/unraid-ui/src/components/form/number/NumberFieldContent.vue b/unraid-ui/src/components/form/number/NumberFieldContent.vue
index 73ba4ed97..acf2077ea 100644
--- a/unraid-ui/src/components/form/number/NumberFieldContent.vue
+++ b/unraid-ui/src/components/form/number/NumberFieldContent.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'relative has-data-[slot=increment]:*:data-[slot=input]:pr-5 has-data-[slot=decrement]:*:data-[slot=input]:pl-5',
+        'relative has-data-[slot=decrement]:*:data-[slot=input]:pl-5 has-data-[slot=increment]:*:data-[slot=input]:pr-5',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/number/NumberFieldDecrement.vue b/unraid-ui/src/components/form/number/NumberFieldDecrement.vue
index 005e642a0..e158c7d3e 100644
--- a/unraid-ui/src/components/form/number/NumberFieldDecrement.vue
+++ b/unraid-ui/src/components/form/number/NumberFieldDecrement.vue
@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+        'absolute top-1/2 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/number/NumberFieldIncrement.vue b/unraid-ui/src/components/form/number/NumberFieldIncrement.vue
index f6fae73e4..e952c1013 100644
--- a/unraid-ui/src/components/form/number/NumberFieldIncrement.vue
+++ b/unraid-ui/src/components/form/number/NumberFieldIncrement.vue
@@ -22,7 +22,7 @@ const forwarded = useForwardProps(delegatedProps);
     v-bind="forwarded"
     :class="
       cn(
-        'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+        'absolute top-1/2 right-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/number/NumberFieldInput.vue b/unraid-ui/src/components/form/number/NumberFieldInput.vue
index 3e029997d..c041a310f 100644
--- a/unraid-ui/src/components/form/number/NumberFieldInput.vue
+++ b/unraid-ui/src/components/form/number/NumberFieldInput.vue
@@ -13,7 +13,7 @@ const props = defineProps<{
     data-slot="input"
     :class="
       cn(
-        'flex h-10 w-full rounded-md border border-input bg-background py-2 text-sm text-center ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border py-2 text-center text-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/form/switch/Switch.vue b/unraid-ui/src/components/form/switch/Switch.vue
index 9a9c4b415..a615f584e 100644
--- a/unraid-ui/src/components/form/switch/Switch.vue
+++ b/unraid-ui/src/components/form/switch/Switch.vue
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+        'peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         props.class
       )
     "
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     <SwitchThumb
       :class="
         cn(
-          'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
+          'bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0'
         )
       "
     />
diff --git a/unraid-ui/src/components/layout/CardWrapper.vue b/unraid-ui/src/components/layout/CardWrapper.vue
index 615baa963..c365aeff8 100644
--- a/unraid-ui/src/components/layout/CardWrapper.vue
+++ b/unraid-ui/src/components/layout/CardWrapper.vue
@@ -19,13 +19,13 @@ withDefaults(
 
 <template>
   <div
-    class="group/card text-left relative flex flex-col flex-1 border-2 border-solid rounded-md shadow-md"
+    class="group/card relative flex flex-1 flex-col rounded-md border-2 border-solid text-left shadow-md"
     :class="[
       padding && 'p-4',
       increasedPadding && 'md:p-6',
       hover && 'hover:shadow-orange/50 transition-all',
-      error && 'text-white bg-unraid-red border-unraid-red',
-      warning && 'text-black bg-yellow-100 border-yellow-100',
+      error && 'bg-unraid-red border-unraid-red text-white',
+      warning && 'border-yellow-100 bg-yellow-100 text-black',
       !error && !warning && 'text-foreground bg-background border-muted',
     ]"
   >
diff --git a/unraid-ui/src/components/layout/PageContainer.vue b/unraid-ui/src/components/layout/PageContainer.vue
index 5134e4c32..87c19508b 100644
--- a/unraid-ui/src/components/layout/PageContainer.vue
+++ b/unraid-ui/src/components/layout/PageContainer.vue
@@ -10,7 +10,7 @@ withDefaults(
 </script>
 
 <template>
-  <div class="grid gap-y-6 w-full mx-auto px-4" :class="maxWidth">
+  <div class="mx-auto grid w-full gap-y-6 px-4" :class="maxWidth">
     <slot />
   </div>
 </template>
diff --git a/unraid-ui/src/components/layout/SettingsGrid.vue b/unraid-ui/src/components/layout/SettingsGrid.vue
index c48b2100f..8efbc1f00 100644
--- a/unraid-ui/src/components/layout/SettingsGrid.vue
+++ b/unraid-ui/src/components/layout/SettingsGrid.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'grid grid-cols-1 md:grid-cols-[35%_1fr] [&>*:nth-child(odd)]:text-end gap-2 items-baseline md:gap-x-3 md:gap-y-6',
+        'grid grid-cols-1 items-baseline gap-2 md:grid-cols-[35%_1fr] md:gap-x-3 md:gap-y-6 [&>*:nth-child(odd)]:text-end',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/ui/accordion/AccordionContent.vue b/unraid-ui/src/components/ui/accordion/AccordionContent.vue
index d8a5b3009..80aafecc7 100644
--- a/unraid-ui/src/components/ui/accordion/AccordionContent.vue
+++ b/unraid-ui/src/components/ui/accordion/AccordionContent.vue
@@ -12,9 +12,9 @@ const delegatedProps = reactiveOmit(props, 'class');
 <template>
   <AccordionContent
     v-bind="delegatedProps"
-    class="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all"
   >
-    <div :class="cn('pb-4 pt-0', props.class)">
+    <div :class="cn('pt-0 pb-4', props.class)">
       <slot />
     </div>
   </AccordionContent>
diff --git a/unraid-ui/src/components/ui/dialog/DialogContent.vue b/unraid-ui/src/components/ui/dialog/DialogContent.vue
index 6874592b7..2ac26993b 100644
--- a/unraid-ui/src/components/ui/dialog/DialogContent.vue
+++ b/unraid-ui/src/components/ui/dialog/DialogContent.vue
@@ -33,13 +33,13 @@ const { teleportTarget } = useTeleport();
 <template>
   <DialogPortal :to="props.to || teleportTarget || 'body'">
     <DialogOverlay
-      class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
     />
     <DialogContent
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg rounded-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed top-1/2 left-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200',
           // Only apply zoom and slide animations if not fullscreen
           !props.class?.includes('min-h-screen') &&
             'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
@@ -54,9 +54,9 @@ const { teleportTarget } = useTeleport();
 
       <DialogClose
         v-if="showCloseButton !== false"
-        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
       >
-        <X class="w-4 h-4" />
+        <X class="h-4 w-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>
diff --git a/unraid-ui/src/components/ui/dialog/DialogDescription.vue b/unraid-ui/src/components/ui/dialog/DialogDescription.vue
index 22a417d61..1a1a51847 100644
--- a/unraid-ui/src/components/ui/dialog/DialogDescription.vue
+++ b/unraid-ui/src/components/ui/dialog/DialogDescription.vue
@@ -12,7 +12,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <DialogDescription v-bind="forwardedProps" :class="cn('text-sm text-muted-foreground', props.class)">
+  <DialogDescription v-bind="forwardedProps" :class="cn('text-muted-foreground text-sm', props.class)">
     <slot />
   </DialogDescription>
 </template>
diff --git a/unraid-ui/src/components/ui/dialog/DialogScrollContent.vue b/unraid-ui/src/components/ui/dialog/DialogScrollContent.vue
index eeaa81cf5..cc529f56b 100644
--- a/unraid-ui/src/components/ui/dialog/DialogScrollContent.vue
+++ b/unraid-ui/src/components/ui/dialog/DialogScrollContent.vue
@@ -32,12 +32,12 @@ const { teleportTarget } = useTeleport();
 <template>
   <DialogPortal :to="props.to || teleportTarget">
     <DialogOverlay
-      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80"
     >
       <DialogContent
         :class="
           cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'border-border bg-background relative z-50 my-8 grid w-full max-w-lg gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
             props.class
           )
         "
@@ -59,9 +59,9 @@ const { teleportTarget } = useTeleport();
 
         <DialogClose
           v-if="showCloseButton !== false"
-          class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
+          class="hover:bg-secondary absolute top-3 right-3 rounded-md p-0.5 transition-colors"
         >
-          <X class="w-4 h-4" />
+          <X class="h-4 w-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>
diff --git a/unraid-ui/src/components/ui/dialog/DialogTitle.vue b/unraid-ui/src/components/ui/dialog/DialogTitle.vue
index 01f4262ed..a174ce0e2 100644
--- a/unraid-ui/src/components/ui/dialog/DialogTitle.vue
+++ b/unraid-ui/src/components/ui/dialog/DialogTitle.vue
@@ -14,7 +14,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 <template>
   <DialogTitle
     v-bind="forwardedProps"
-    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
+    :class="cn('text-lg leading-none font-semibold tracking-tight', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 31ca598c7..fbcd7631e 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -24,14 +24,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <Check class="h-4 w-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index 93d1b4606..0b96abded 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -32,7 +32,7 @@ const { teleportTarget } = useTeleport();
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-32 overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-lg border p-1 shadow-md',
           props.class
         )
       "
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index a5b63043b..bc7a05f7c 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -18,7 +18,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm gap-2 px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
         inset && 'pl-8',
         props.class
       )
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 6bb3e020b..7a2014cec 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index a4fbcd1d5..ec3bfdac1 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -14,5 +14,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('bg-muted -mx-1 my-1 h-px', props.class)" />
 </template>
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 8caf4fe5e..3742e6626 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 38a157606..92465a4dd 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -17,7 +17,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
+        'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index 6a9403322..b64c99254 100644
--- a/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/unraid-ui/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -8,7 +8,7 @@ const forwardedProps = useForwardProps(props);
 
 <template>
   <DropdownMenuTrigger
-    class="outline-hidden cursor-pointer data-[state=open]:cursor-pointer"
+    class="cursor-pointer outline-hidden data-[state=open]:cursor-pointer"
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/unraid-ui/src/components/ui/select/SelectContent.vue b/unraid-ui/src/components/ui/select/SelectContent.vue
index a5005390e..1ca20c9d4 100644
--- a/unraid-ui/src/components/ui/select/SelectContent.vue
+++ b/unraid-ui/src/components/ui/select/SelectContent.vue
@@ -35,7 +35,7 @@ const { teleportTarget } = useTeleport();
       v-bind="{ ...forwarded, ...$attrs }"
       :class="
         cn(
-          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class
diff --git a/unraid-ui/src/components/ui/select/SelectGroup.vue b/unraid-ui/src/components/ui/select/SelectGroup.vue
index b90b13010..dd8510cb3 100644
--- a/unraid-ui/src/components/ui/select/SelectGroup.vue
+++ b/unraid-ui/src/components/ui/select/SelectGroup.vue
@@ -10,7 +10,7 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+  <SelectGroup :class="cn('w-full p-1', props.class)" v-bind="delegatedProps">
     <slot />
   </SelectGroup>
 </template>
diff --git a/unraid-ui/src/components/ui/select/SelectItem.vue b/unraid-ui/src/components/ui/select/SelectItem.vue
index 8c5aa6eee..927c43357 100644
--- a/unraid-ui/src/components/ui/select/SelectItem.vue
+++ b/unraid-ui/src/components/ui/select/SelectItem.vue
@@ -23,7 +23,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+        'focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50',
         props.class
       )
     "
diff --git a/unraid-ui/src/components/ui/select/SelectLabel.vue b/unraid-ui/src/components/ui/select/SelectLabel.vue
index 739b36aae..15fd36b7b 100644
--- a/unraid-ui/src/components/ui/select/SelectLabel.vue
+++ b/unraid-ui/src/components/ui/select/SelectLabel.vue
@@ -7,7 +7,7 @@ const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }
 </script>
 
 <template>
-  <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
+  <SelectLabel :class="cn('py-1.5 pr-2 pl-8 text-sm font-semibold', props.class)">
     <slot />
   </SelectLabel>
 </template>
diff --git a/unraid-ui/src/components/ui/select/SelectSeparator.vue b/unraid-ui/src/components/ui/select/SelectSeparator.vue
index 96d8a9ff8..b24176f98 100644
--- a/unraid-ui/src/components/ui/select/SelectSeparator.vue
+++ b/unraid-ui/src/components/ui/select/SelectSeparator.vue
@@ -10,5 +10,5 @@ const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+  <SelectSeparator v-bind="delegatedProps" :class="cn('bg-muted -mx-1 my-1 h-px', props.class)" />
 </template>
diff --git a/unraid-ui/src/components/ui/select/SelectTrigger.vue b/unraid-ui/src/components/ui/select/SelectTrigger.vue
index 813b30be0..547f10983 100644
--- a/unraid-ui/src/components/ui/select/SelectTrigger.vue
+++ b/unraid-ui/src/components/ui/select/SelectTrigger.vue
@@ -17,14 +17,14 @@ const forwardedProps = useForwardProps(delegatedProps);
     v-bind="forwardedProps"
     :class="
       cn(
-        'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+        'border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-start text-sm focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate',
         props.class
       )
     "
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50 shrink-0" />
+      <ChevronDown class="h-4 w-4 shrink-0 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>
diff --git a/unraid-ui/src/forms/AccordionLayout.vue b/unraid-ui/src/forms/AccordionLayout.vue
index a6354c704..eadebe3b9 100644
--- a/unraid-ui/src/forms/AccordionLayout.vue
+++ b/unraid-ui/src/forms/AccordionLayout.vue
@@ -5,19 +5,19 @@
         v-for="(element, index) in elements"
         :key="`${layout.path || ''}-${index}`"
         :value="`item-${index}`"
-        class="border rounded-lg bg-background"
+        class="bg-background rounded-lg border"
       >
-        <AccordionTrigger class="px-4 py-3 hover:bg-muted/50 [&[data-state=open]>svg]:rotate-180">
+        <AccordionTrigger class="hover:bg-muted/50 px-4 py-3 [&[data-state=open]>svg]:rotate-180">
           <div class="flex flex-col items-start space-y-1 text-left">
             <span class="font-medium">
               {{ getAccordionTitle(element, index) }}
             </span>
-            <span v-if="getAccordionDescription(element, index)" class="text-sm text-muted-foreground">
+            <span v-if="getAccordionDescription(element, index)" class="text-muted-foreground text-sm">
               {{ getAccordionDescription(element, index) }}
             </span>
           </div>
         </AccordionTrigger>
-        <AccordionContent class="px-4 pb-4 pt-0">
+        <AccordionContent class="px-4 pt-0 pb-4">
           <div class="space-y-4">
             <DispatchRenderer
               :schema="layout.schema"
diff --git a/unraid-ui/src/forms/ComboBoxField.vue b/unraid-ui/src/forms/ComboBoxField.vue
index b87323171..c3d868c0f 100644
--- a/unraid-ui/src/forms/ComboBoxField.vue
+++ b/unraid-ui/src/forms/ComboBoxField.vue
@@ -90,7 +90,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
       </ComboboxTrigger>
     </ComboboxAnchor>
     <ComboboxList>
-      <ComboboxEmpty class="p-2 text-sm text-muted-foreground"> No suggestions found </ComboboxEmpty>
+      <ComboboxEmpty class="text-muted-foreground p-2 text-sm"> No suggestions found </ComboboxEmpty>
 
       <template v-for="suggestion in suggestions" :key="suggestion.value">
         <TooltipProvider v-if="suggestion.tooltip">
@@ -99,7 +99,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
               <ComboboxItem
                 :value="suggestion.value"
                 @select="handleSelect"
-                class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+                class="hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
               >
                 <span>{{ suggestion.label || suggestion.value }}</span>
               </ComboboxItem>
@@ -113,7 +113,7 @@ if (control.value.data !== undefined && control.value.data !== null) {
           v-else
           :value="suggestion.value"
           @select="handleSelect"
-          class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground"
+          class="hover:bg-accent hover:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none"
         >
           <span>{{ suggestion.label || suggestion.value }}</span>
         </ComboboxItem>
diff --git a/unraid-ui/src/forms/FormErrors.vue b/unraid-ui/src/forms/FormErrors.vue
index ae0fa7681..2a6aa06cf 100644
--- a/unraid-ui/src/forms/FormErrors.vue
+++ b/unraid-ui/src/forms/FormErrors.vue
@@ -12,7 +12,7 @@ const normalizedErrors = computed(() => {
 </script>
 
 <template>
-  <div v-if="normalizedErrors.length > 0" class="mt-2 text-red-500 text-sm">
+  <div v-if="normalizedErrors.length > 0" class="mt-2 text-sm text-red-500">
     <p v-for="error in normalizedErrors" :key="error">{{ error }}</p>
   </div>
 </template>
diff --git a/unraid-ui/src/forms/HorizontalLayout.vue b/unraid-ui/src/forms/HorizontalLayout.vue
index d502fdd9a..5b34d94c7 100644
--- a/unraid-ui/src/forms/HorizontalLayout.vue
+++ b/unraid-ui/src/forms/HorizontalLayout.vue
@@ -31,7 +31,7 @@ const elements = computed(() => {
 </script>
 
 <template>
-  <div v-if="isVisible" class="flex flex-row gap-2 items-baseline">
+  <div v-if="isVisible" class="flex flex-row items-baseline gap-2">
     <template v-for="(element, _i) in elements" :key="_i">
       <DispatchRenderer
         :schema="layout.layout.value.schema"
diff --git a/unraid-ui/src/forms/LabelRenderer.vue b/unraid-ui/src/forms/LabelRenderer.vue
index e14a3604a..15b7dff30 100644
--- a/unraid-ui/src/forms/LabelRenderer.vue
+++ b/unraid-ui/src/forms/LabelRenderer.vue
@@ -74,7 +74,7 @@ const descriptionClass = computed(() => {
 
 <template>
   <!-- Use the computed isVisible based on renderer.value.visible -->
-  <div class="flex flex-col gap-2 shrink-0">
+  <div class="flex shrink-0 flex-col gap-2">
     <!-- Replace native label with the Label component -->
     <Label v-if="labelText" :class="labelClass">{{ labelText }}</Label>
     <!-- Use v-html with the parsedDescription ref -->
diff --git a/unraid-ui/src/forms/MultiSelect.vue b/unraid-ui/src/forms/MultiSelect.vue
index 85cb19d41..5c47bde64 100644
--- a/unraid-ui/src/forms/MultiSelect.vue
+++ b/unraid-ui/src/forms/MultiSelect.vue
@@ -100,7 +100,7 @@ const placeholder = computed(() => {
         <button
           v-if="!isReadonly"
           @click.stop="removeValue(value)"
-          class="ml-1 hover:text-destructive"
+          class="hover:text-destructive ml-1"
           type="button"
         >
           <XMarkIcon class="h-3 w-3" />
@@ -119,7 +119,7 @@ const placeholder = computed(() => {
           <ChevronDownIcon class="ml-2 h-4 w-4" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent class="w-56 max-h-[20rem] overflow-y-auto">
+      <DropdownMenuContent class="max-h-[20rem] w-56 overflow-y-auto">
         <DropdownMenuLabel>Select Items</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuCheckboxItem
@@ -139,7 +139,7 @@ const placeholder = computed(() => {
         >
           <div class="flex flex-col">
             <span>{{ option.label }}</span>
-            <span v-if="option.description" class="text-xs text-muted-foreground">
+            <span v-if="option.description" class="text-muted-foreground text-xs">
               {{ option.description }}
             </span>
           </div>
@@ -172,13 +172,13 @@ const placeholder = computed(() => {
         </Button>
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent class="w-full max-h-[20rem] overflow-y-auto">
-        <DropdownMenuLabel class="flex justify-between items-center">
+      <DropdownMenuContent class="max-h-[20rem] w-full overflow-y-auto">
+        <DropdownMenuLabel class="flex items-center justify-between">
           <span>Select Items</span>
           <button
             v-if="selectedValues.length > 0"
             @click="clearAll"
-            class="text-xs text-muted-foreground hover:text-foreground"
+            class="text-muted-foreground hover:text-foreground text-xs"
             type="button"
           >
             Clear all
@@ -203,7 +203,7 @@ const placeholder = computed(() => {
         >
           <div class="flex flex-col">
             <span>{{ option.label }}</span>
-            <span v-if="option.description" class="text-xs text-muted-foreground">
+            <span v-if="option.description" class="text-muted-foreground text-xs">
               {{ option.description }}
             </span>
           </div>
@@ -211,7 +211,7 @@ const placeholder = computed(() => {
 
         <template v-if="selectedValues.length > 0">
           <DropdownMenuSeparator />
-          <div class="px-2 py-2 text-sm text-muted-foreground">{{ selectedValues.length }} selected</div>
+          <div class="text-muted-foreground px-2 py-2 text-sm">{{ selectedValues.length }} selected</div>
         </template>
       </DropdownMenuContent>
     </DropdownMenuRoot>
diff --git a/unraid-ui/src/forms/ObjectArrayField.vue b/unraid-ui/src/forms/ObjectArrayField.vue
index 0298aba91..5339f2d5f 100644
--- a/unraid-ui/src/forms/ObjectArrayField.vue
+++ b/unraid-ui/src/forms/ObjectArrayField.vue
@@ -168,7 +168,7 @@ const updateItem = (index: number, newValue: unknown) => {
 <template>
   <div class="w-full">
     <Tabs v-if="items.length > 0" v-model="activeTab" class="w-full">
-      <div class="flex items-center gap-2 mb-4">
+      <div class="mb-4 flex items-center gap-2">
         <TabsList class="flex-1 flex-wrap">
           <TabsTrigger
             v-for="(item, index) in items"
@@ -196,8 +196,8 @@ const updateItem = (index: number, newValue: unknown) => {
         :value="String(index)"
         class="mt-0 w-full"
       >
-        <div class="border rounded-lg p-1 sm:p-6 w-full">
-          <div class="flex justify-end mb-4">
+        <div class="w-full rounded-lg border p-1 sm:p-6">
+          <div class="mb-4 flex justify-end">
             <Button
               v-if="!isItemProtected(item)"
               variant="ghost"
@@ -206,7 +206,7 @@ const updateItem = (index: number, newValue: unknown) => {
               :disabled="!control.enabled"
               @click="removeItem(index)"
             >
-              <X class="h-4 w-4 mr-2" />
+              <X class="mr-2 h-4 w-4" />
               Remove {{ getItemLabel(item, index) }}
             </Button>
           </div>
@@ -214,13 +214,13 @@ const updateItem = (index: number, newValue: unknown) => {
             <!-- Show warning if item matches protected condition -->
             <div
               v-if="getItemWarning(item)"
-              class="mb-4 p-3 bg-warning/10 border border-warning/20 rounded-lg"
+              class="bg-warning/10 border-warning/20 mb-4 rounded-lg border p-3"
             >
               <div class="flex items-start gap-2">
                 <span class="text-warning">⚠️</span>
                 <div>
-                  <div class="font-medium text-warning">{{ getItemWarning(item)?.title }}</div>
-                  <div class="text-sm text-muted-foreground mt-1">
+                  <div class="text-warning font-medium">{{ getItemWarning(item)?.title }}</div>
+                  <div class="text-muted-foreground mt-1 text-sm">
                     {{ getItemWarning(item)?.description }}
                   </div>
                 </div>
@@ -240,10 +240,10 @@ const updateItem = (index: number, newValue: unknown) => {
       </TabsContent>
     </Tabs>
 
-    <div v-else class="text-center py-8 border-2 border-dashed rounded-lg">
+    <div v-else class="rounded-lg border-2 border-dashed py-8 text-center">
       <p class="text-muted-foreground mb-4">No {{ itemTypeName.toLowerCase() }}s configured</p>
       <Button variant="outline" size="md" :disabled="!control.enabled" @click="addItem">
-        <Plus class="h-4 w-4 mr-2" />
+        <Plus class="mr-2 h-4 w-4" />
         Add First {{ itemTypeName }}
       </Button>
     </div>
diff --git a/unraid-ui/src/forms/PreconditionsLabel.vue b/unraid-ui/src/forms/PreconditionsLabel.vue
index 82433b917..92cd72fae 100644
--- a/unraid-ui/src/forms/PreconditionsLabel.vue
+++ b/unraid-ui/src/forms/PreconditionsLabel.vue
@@ -32,8 +32,8 @@ const description = computed(() => props.uischema.options?.description);
     <p v-if="description" class="mb-2">{{ description }}</p>
     <ul class="list-none space-y-1">
       <li v-for="(item, index) in items" :key="index" class="flex items-center">
-        <span v-if="item.status" class="text-green-500 mr-2 font-bold">✓</span>
-        <span v-else class="text-red-500 mr-2 font-extrabold">✕</span>
+        <span v-if="item.status" class="mr-2 font-bold text-green-500">✓</span>
+        <span v-else class="mr-2 font-extrabold text-red-500">✕</span>
         <span>{{ item.text }}</span>
       </li>
     </ul>
diff --git a/unraid-ui/src/forms/SteppedLayout.vue b/unraid-ui/src/forms/SteppedLayout.vue
index 8a60855f8..d12bab762 100644
--- a/unraid-ui/src/forms/SteppedLayout.vue
+++ b/unraid-ui/src/forms/SteppedLayout.vue
@@ -141,13 +141,13 @@ const getStepState = (stepIndex: number): StepState => {
           >
             {{ step.label }}
           </StepperTitle>
-          <StepperDescription v-if="step.description" class="text-xs font-normal text-muted-foreground">
+          <StepperDescription v-if="step.description" class="text-muted-foreground text-xs font-normal">
             {{ step.description }}
           </StepperDescription>
         </div>
         <StepperSeparator
           v-if="index < stepsConfig.length - 1"
-          class="absolute left-1/2 top-4 -z-10 ml-[calc(var(--separator-offset,0rem)+10px)] h-0.5 w-[calc(100%-20px)] bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary"
+          class="bg-border data-[state=active]:bg-primary data-[state=completed]:bg-primary absolute top-4 left-1/2 -z-10 ml-[calc(var(--separator-offset,0rem)+10px)] h-0.5 w-[calc(100%-20px)]"
         />
       </StepperItem>
     </Stepper>
diff --git a/unraid-ui/src/forms/StringArrayField.vue b/unraid-ui/src/forms/StringArrayField.vue
index 9ed868987..7939b31f3 100644
--- a/unraid-ui/src/forms/StringArrayField.vue
+++ b/unraid-ui/src/forms/StringArrayField.vue
@@ -62,7 +62,7 @@ const placeholder = computed(() => control.value.uischema?.options?.placeholder
     <Button
       variant="outline"
       size="md"
-      class="text-sm rounded-sm"
+      class="rounded-sm text-sm"
       :disabled="!control.enabled"
       @click="addItem"
     >