fix: enable enforce-consistent-class-order tailwind lint rule (#9428)

## Summary

Enable `better-tailwindcss/enforce-consistent-class-order` lint rule and
auto-fix all 1027 violations across 263 files. Stacked on #9427.

## Changes

- **What**: Sort Tailwind classes into consistent order via `eslint
--fix`
- Enable `enforce-consistent-class-order` as `'error'` in eslint config
- Purely cosmetic reordering — no behavioral or visual changes

## Review Focus

Mechanical auto-fix PR — all changes are class reordering only. This is
the largest diff but lowest risk since it changes no class names, only
their order.

**Stack:** #9417 → #9427 → **this PR**

Fixes #9300 (partial — 3 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9428-fix-enable-enforce-consistent-class-order-tailwind-lint-rule-31a6d73d3650811c9065f5178ba3e724)
by [Unito](https://www.unito.io)

src/components/widget/layout/BaseModalLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="cn('rounded-2xl overflow-hidden relative', sizeClasses)"
+    :class="cn('relative overflow-hidden rounded-2xl', sizeClasses)"
     @keydown.esc.capture="handleEscape"
   >
     <div
@@ -8,19 +8,19 @@
       :style="gridStyle"
     >
       <nav
-        class="h-full overflow-hidden bg-modal-panel-background flex flex-col"
+        class="flex h-full flex-col overflow-hidden bg-modal-panel-background"
         :inert="!showLeftPanel"
         :aria-hidden="!showLeftPanel"
       >
         <header
           data-component-id="LeftPanelHeader"
-          class="flex w-full h-18 shrink-0 gap-2 pl-6 pr-3 items-center-safe"
+          class="flex h-18 w-full shrink-0 items-center-safe gap-2 pr-3 pl-6"
         >
           <slot name="leftPanelHeaderTitle" />
           <Button
             v-if="!notMobile && showLeftPanel"
             size="lg"
-            class="w-10 p-0 ml-auto"
+            class="ml-auto w-10 p-0"
             :aria-label="t('g.hideLeftPanel')"
             @click="toggleLeftPanel"
           >
@@ -30,10 +30,10 @@
         <slot name="leftPanel" />
       </nav>
 
-      <div class="flex flex-col bg-base-background overflow-hidden">
+      <div class="flex flex-col overflow-hidden bg-base-background">
         <header
           v-if="$slots.header"
-          class="w-full h-18 px-6 flex items-center justify-between gap-2"
+          class="flex h-18 w-full items-center justify-between gap-2 px-6"
         >
           <div class="flex flex-1 shrink-0 gap-2">
             <Button
@@ -73,7 +73,7 @@
           <slot name="contentFilter" />
           <h2
             v-if="!hasLeftPanel"
-            class="text-xxl m-0 select-none px-6 pt-2 pb-6 capitalize"
+            class="text-xxl m-0 px-6 pt-2 pb-6 capitalize select-none"
           >
             {{ contentTitle }}
           </h2>
@@ -90,7 +90,7 @@
         :aria-hidden="!isRightPanelOpen"
       >
         <div
-          class="min-w-72 w-72 flex flex-col bg-modal-panel-background h-full"
+          class="flex h-full w-72 min-w-72 flex-col bg-modal-panel-background"
         >
           <header
             data-component-id="RightPanelHeader"
@@ -98,7 +98,7 @@
           >
             <h2
               v-if="rightPanelTitle"
-              class="flex-1 select-none text-base font-semibold"
+              class="flex-1 text-base font-semibold select-none"
             >
               {{ rightPanelTitle }}
             </h2>
@@ -202,7 +202,7 @@ const showLeftPanel = computed(() => {
 
 const contentContainerClass = computed(() =>
   cn(
-    'flex min-h-0 flex-1 flex-col overflow-y-auto scrollbar-custom',
+    'flex scrollbar-custom min-h-0 flex-1 flex-col overflow-y-auto',
     contentPadding === 'default' && 'px-6 pt-0 pb-10',
     contentPadding === 'compact' && 'px-6 pt-0 pb-2'
   )

src/components/widget/nav/NavIcon.vue

@@ -1,5 +1,5 @@
 <template>
-  <i :class="icon" class="text-neutral text-sm shrink-0" />
+  <i :class="icon" class="text-neutral shrink-0 text-sm" />
 </template>
 
 <script setup lang="ts">

src/components/widget/nav/NavItem.vue

@@ -5,7 +5,7 @@
       disabled: !isOverflowing,
       pt: { text: { class: 'w-max whitespace-nowrap' } }
     }"
-    class="flex cursor-pointer select-none items-center-safe gap-2 rounded-md px-4 py-3 text-sm transition-colors text-base-foreground"
+    class="flex cursor-pointer items-center-safe gap-2 rounded-md px-4 py-3 text-sm text-base-foreground transition-colors select-none"
     :class="
       active
         ? 'bg-interface-menu-component-surface-selected'
@@ -16,7 +16,7 @@
     @click="onClick"
   >
     <NavIcon v-if="icon" :icon="icon" />
-    <i v-else class="text-neutral icon-[lucide--folder] text-xs shrink-0" />
+    <i v-else class="text-neutral icon-[lucide--folder] shrink-0 text-xs" />
     <span ref="textRef" class="min-w-0 truncate">
       <slot />
     </span>

src/components/widget/nav/NavTitle.vue

@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'flex items-center justify-between m-0 px-3 py-0 pt-5',
+        'm-0 flex items-center justify-between px-3 py-0 pt-5',
         collapsible && 'cursor-pointer select-none'
       )
     "
@@ -15,7 +15,7 @@
       v-if="collapsible"
       :class="
         cn(
-          'pi transition-transform duration-200 text-xs text-text-secondary',
+          'pi text-xs text-text-secondary transition-transform duration-200',
           isCollapsed ? 'pi-chevron-right' : 'pi-chevron-down'
         )
       "

src/components/widget/panel/LeftSidePanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex w-full flex-auto overflow-y-auto gap-1 min-h-0 flex-col bg-modal-panel-background scrollbar-hide px-3"
+    class="flex min-h-0 scrollbar-hide w-full flex-auto flex-col gap-1 overflow-y-auto bg-modal-panel-background px-3"
   >
     <template
       v-for="item in navItems"