From 493b1e42aa2c115bdf0f2d5978f0db6ea61f161a Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Wed, 4 Mar 2026 23:41:23 -0800
Subject: [PATCH] fix: enable no-deprecated-classes tailwind lint rule (#9417)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Enable `better-tailwindcss/no-deprecated-classes` lint rule and auto-fix
all 103 violations across 65 files. First PR in a stacked series for
#9300.

## Changes

- **What**: Replace deprecated Tailwind v3 classes with v4 equivalents:
  - `rounded` → `rounded-sm` (85)
  - `flex-shrink-0` → `shrink-0` (16)
  - `flex-grow` → `grow` (2)
- Enable `no-deprecated-classes` as `'error'` in eslint config
- Update one test asserting on `'rounded'` class string

## Review Focus

Mechanical auto-fix PR — all changes produced by `eslint --fix`. No
visual or behavioral changes (Tailwind v4 aliases these classes
identically).

Fixes #9300 (partial — 1 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9417-fix-enable-no-deprecated-classes-tailwind-lint-rule-31a6d73d3650819eaef4cf8ad84fb186)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 eslint.config.ts                                   |  3 +--
 .../bottomPanel/tabs/shortcuts/ShortcutsList.vue   |  4 ++--
 src/components/common/BadgePill.vue                |  2 +-
 src/components/common/FormImageUpload.vue          |  2 +-
 src/components/common/SearchBox.vue                |  2 +-
 src/components/common/TreeExplorerV2Node.vue       |  2 +-
 .../widget/WorkflowTemplateSelectorDialog.vue      | 10 +++++-----
 .../dialog/content/MissingNodesContent.vue         |  4 ++--
 .../content/TopUpCreditsDialogContentLegacy.vue    |  2 +-
 .../CancelSubscriptionDialogContent.vue            |  2 +-
 src/components/graph/CanvasModeSelector.vue        |  2 +-
 src/components/graph/NodeContextMenu.vue           |  2 +-
 src/components/graph/modals/ZoomControlsModal.vue  | 10 +++++-----
 .../graph/selectionToolbox/ColorPickerMenu.vue     |  6 +++---
 .../helpcenter/HelpCenterMenuContent.vue           |  2 +-
 src/components/input/MultiSelect.vue               |  2 +-
 src/components/input/SingleSelect.vue              |  2 +-
 src/components/queue/job/JobDetailsPopover.vue     |  2 +-
 src/components/queue/job/QueueAssetPreview.vue     |  2 +-
 .../rightSidePanel/parameters/WidgetActions.vue    |  8 ++++----
 .../rightSidePanel/settings/TabGlobalSettings.vue  |  2 +-
 .../rightSidePanel/subgraph/SubgraphEditor.vue     |  2 +-
 .../rightSidePanel/subgraph/SubgraphNodeWidget.vue |  2 +-
 .../searchbox/v2/NodeSearchCategorySidebar.vue     |  2 +-
 .../searchbox/v2/NodeSearchCategoryTreeNode.vue    |  2 +-
 src/components/searchbox/v2/NodeSearchListItem.vue | 14 +++++++-------
 src/components/sidebar/ComfyMenuButton.vue         |  2 +-
 src/components/sidebar/SideToolbar.vue             |  2 +-
 src/components/toast/ProgressToastItem.vue         |  2 +-
 src/components/ui/select/SelectItem.vue            |  2 +-
 .../ui/stepper/FormattedNumberStepper.vue          |  2 +-
 src/platform/assets/components/AssetBadgeGroup.vue |  2 +-
 src/platform/assets/components/Media3DTop.vue      |  2 +-
 src/platform/assets/components/MediaAssetCard.vue  | 10 ++++++----
 .../assets/components/MediaAssetFilterMenu.vue     |  2 +-
 src/platform/assets/components/MediaAudioTop.vue   |  2 +-
 src/platform/assets/components/MediaImageTop.vue   |  2 +-
 src/platform/assets/components/MediaOtherTop.vue   |  2 +-
 src/platform/assets/components/MediaTextTop.vue    |  2 +-
 src/platform/assets/components/MediaVideoTop.vue   |  2 +-
 .../components/ModelImportProgressDialog.vue       |  8 ++++----
 .../assets/components/UploadModelConfirmation.vue  |  2 +-
 .../assets/components/UploadModelDialog.vue        |  2 +-
 .../assets/components/UploadModelProgress.vue      |  4 ++--
 .../cloud/onboarding/CloudAuthTimeoutView.vue      |  6 +++---
 src/platform/secrets/components/SecretListItem.vue |  2 +-
 .../TopUpCreditsDialogContentWorkspace.vue         |  2 +-
 .../components/WorkspaceSwitcherPopover.vue        | 10 +++++-----
 .../dialogs/CreateWorkspaceDialogContent.vue       |  2 +-
 .../dialogs/DeleteWorkspaceDialogContent.vue       |  2 +-
 .../dialogs/EditWorkspaceDialogContent.vue         |  2 +-
 .../dialogs/InviteMemberDialogContent.vue          |  2 +-
 .../dialogs/InviteMemberUpsellDialogContent.vue    |  2 +-
 .../dialogs/LeaveWorkspaceDialogContent.vue        |  2 +-
 .../dialogs/RemoveMemberDialogContent.vue          |  2 +-
 .../dialogs/RevokeInviteDialogContent.vue          |  2 +-
 .../extensions/linearMode/LinearWelcome.vue        |  2 +-
 .../widgets/components/ValueControlPopover.vue     |  2 +-
 .../vueNodes/widgets/components/WidgetChart.vue    |  2 +-
 .../widgets/components/WidgetInputNumberSlider.vue |  2 +-
 .../components/audio/AudioPreviewPlayer.vue        |  6 +++---
 .../components/form/FormSelectButton.test.ts       |  2 +-
 .../widgets/components/form/FormSelectButton.vue   |  2 +-
 .../components/form/dropdown/FormDropdownInput.vue |  2 +-
 .../components/manager/infoPanel/MarkdownText.vue  |  2 +-
 .../manager/infoPanel/tabs/WarningTabPanel.vue     |  5 ++++-
 66 files changed, 107 insertions(+), 103 deletions(-)

diff --git a/eslint.config.ts b/eslint.config.ts
index 083f373840..199c7d91b7 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -131,8 +131,7 @@ export default defineConfig([
       // Off: large batch change (v3→v4 renames like rounded→rounded-sm),
       // enable and apply with `eslint --fix` in a follow-up PR
       'better-tailwindcss/enforce-canonical-classes': 'off',
-      // Off: large batch change, enable and apply with `eslint --fix`
-      'better-tailwindcss/no-deprecated-classes': 'off'
+      'better-tailwindcss/no-deprecated-classes': 'error'
     }
   },
   // Disables ESLint rules that conflict with formatters
diff --git a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
index 3938facfb6..b9a9ff6894 100644
--- a/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
+++ b/src/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue
@@ -19,7 +19,7 @@
           <div
             v-for="command in subcategoryCommands"
             :key="command.id"
-            class="shortcut-item flex items-center justify-between rounded py-2 transition-colors duration-200"
+            class="shortcut-item flex items-center justify-between rounded-sm py-2 transition-colors duration-200"
           >
             <div class="shortcut-info grow pr-4">
               <div class="shortcut-name text-sm font-medium">
@@ -35,7 +35,7 @@
                 <span
                   v-for="key in command.keybinding!.combo.getKeySequences()"
                   :key="key"
-                  class="key-badge min-w-6 rounded bg-muted-background px-2 py-1 text-center font-mono text-xs"
+                  class="key-badge min-w-6 rounded-sm bg-muted-background px-2 py-1 text-center font-mono text-xs"
                 >
                   {{ formatKey(key) }}
                 </span>
diff --git a/src/components/common/BadgePill.vue b/src/components/common/BadgePill.vue
index 4c2cb8cf92..77c13e6f84 100644
--- a/src/components/common/BadgePill.vue
+++ b/src/components/common/BadgePill.vue
@@ -2,7 +2,7 @@
   <span
     :class="
       cn(
-        'flex items-center gap-1 rounded border px-1.5 py-0.5 text-xxs',
+        'flex items-center gap-1 rounded-sm border px-1.5 py-0.5 text-xxs',
         textColorClass
       )
     "
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 7e0b9916d0..39811e0540 100644
--- a/src/components/common/FormImageUpload.vue
+++ b/src/components/common/FormImageUpload.vue
@@ -2,7 +2,7 @@
   <div class="image-upload-wrapper">
     <div class="flex items-center gap-2">
       <div
-        class="preview-box flex h-16 w-16 items-center justify-center rounded border p-2"
+        class="preview-box flex h-16 w-16 items-center justify-center rounded-sm border p-2"
         :class="{ 'bg-base-background': !modelValue }"
       >
         <img
diff --git a/src/components/common/SearchBox.vue b/src/components/common/SearchBox.vue
index e927fdd074..0d440fb709 100644
--- a/src/components/common/SearchBox.vue
+++ b/src/components/common/SearchBox.vue
@@ -117,7 +117,7 @@ watchDebounced(
 const wrapperStyle = computed(() => {
   if (showBorder) {
     return cn(
-      'rounded p-2 border border-solid border-border-default box-border',
+      'rounded-sm p-2 border border-solid border-border-default box-border',
       isLarge.value ? 'h-10' : 'h-8'
     )
   }
diff --git a/src/components/common/TreeExplorerV2Node.vue b/src/components/common/TreeExplorerV2Node.vue
index 6a9849948a..4c65dd0936 100644
--- a/src/components/common/TreeExplorerV2Node.vue
+++ b/src/components/common/TreeExplorerV2Node.vue
@@ -27,7 +27,7 @@
       <button
         :class="
           cn(
-            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent text-muted-foreground hover:text-foreground',
+            'flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm border-none bg-transparent text-muted-foreground hover:text-foreground',
             'opacity-0 group-hover/tree-node:opacity-100'
           )
         "
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index d30759c9f2..e97fa66d1a 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -133,7 +133,7 @@
         <!-- Title -->
         <span
           v-if="isLoading"
-          class="inline-block h-8 w-48 animate-pulse rounded bg-dialog-surface"
+          class="inline-block h-8 w-48 animate-pulse rounded-sm bg-dialog-surface"
         ></span>
 
         <!-- Template Cards Grid -->
@@ -164,10 +164,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="mb-2 h-6 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="h-4 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
@@ -349,10 +349,10 @@
               <CardBottom>
                 <div class="px-4 py-3">
                   <div
-                    class="mb-2 h-6 animate-pulse rounded bg-dialog-surface"
+                    class="mb-2 h-6 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                   <div
-                    class="h-4 animate-pulse rounded bg-dialog-surface"
+                    class="h-4 animate-pulse rounded-sm bg-dialog-surface"
                   ></div>
                 </div>
               </CardBottom>
diff --git a/src/components/dialog/content/MissingNodesContent.vue b/src/components/dialog/content/MissingNodesContent.vue
index 9aea195f2a..1c8171c520 100644
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -68,7 +68,7 @@
             @keydown.space.prevent="toggleSelectAll"
           >
             <div
-              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
               :class="
                 isAllSelected || isSomeSelected
                   ? 'bg-primary-background'
@@ -113,7 +113,7 @@
             @keydown.space.prevent="toggleNode(node.label)"
           >
             <div
-              class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+              class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
               :class="
                 replacedTypes.has(node.label) || selectedTypes.has(node.label)
                   ? 'bg-primary-background'
diff --git a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
index 536a9c785a..dd94bd9a87 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />
diff --git a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
index f67c26d5e5..e2054dab15 100644
--- a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
+++ b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('subscription.cancelDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         :disabled="isLoading"
         @click="onClose"
diff --git a/src/components/graph/CanvasModeSelector.vue b/src/components/graph/CanvasModeSelector.vue
index 48efb50b11..e78d6d5000 100644
--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -40,7 +40,7 @@
       </div>
 
       <div
-        class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+        class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
         @click="setMode('hand')"
       >
         <div class="flex items-center gap-2">
diff --git a/src/components/graph/NodeContextMenu.vue b/src/components/graph/NodeContextMenu.vue
index 97ee1b9c99..108d0f487e 100644
--- a/src/components/graph/NodeContextMenu.vue
+++ b/src/components/graph/NodeContextMenu.vue
@@ -16,7 +16,7 @@
         <span class="flex-1">{{ item.label }}</span>
         <span
           v-if="item.shortcut"
-          class="flex h-3.5 min-w-3.5 items-center justify-center rounded bg-interface-menu-keybind-surface-default px-1 py-0 text-xs"
+          class="flex h-3.5 min-w-3.5 items-center justify-center rounded-sm bg-interface-menu-keybind-surface-default px-1 py-0 text-xs"
         >
           {{ item.shortcut }}
         </span>
diff --git a/src/components/graph/modals/ZoomControlsModal.vue b/src/components/graph/modals/ZoomControlsModal.vue
index 500b315452..14122761dc 100644
--- a/src/components/graph/modals/ZoomControlsModal.vue
+++ b/src/components/graph/modals/ZoomControlsModal.vue
@@ -10,7 +10,7 @@
     >
       <div class="flex flex-col gap-1">
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -22,7 +22,7 @@
         </div>
 
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -34,7 +34,7 @@
         </div>
 
         <div
-          class="flex cursor-pointer items-center justify-between rounded px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
+          class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
@@ -45,7 +45,7 @@
 
         <div
           ref="zoomInputContainer"
-          class="zoomInputContainer flex items-center gap-1 rounded bg-input-surface p-2"
+          class="zoomInputContainer flex items-center gap-1 rounded-sm bg-input-surface p-2"
         >
           <InputNumber
             :default-value="canvasStore.appScalePercentage"
@@ -59,7 +59,7 @@
             @input="applyZoom"
             @keyup.enter="applyZoom"
           />
-          <span class="flex-shrink-0 text-sm text-text-primary">%</span>
+          <span class="shrink-0 text-sm text-text-primary">%</span>
         </div>
       </div>
     </div>
diff --git a/src/components/graph/selectionToolbox/ColorPickerMenu.vue b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
index dddcfb1d02..5ce69a5898 100644
--- a/src/components/graph/selectionToolbox/ColorPickerMenu.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
@@ -31,7 +31,7 @@
         :key="subOption.label"
         :class="
           cn(
-            'hover:bg-secondary-background-hover rounded cursor-pointer',
+            'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
             isColorSubmenu
               ? 'w-7 h-7 flex items-center justify-center'
               : 'flex items-center gap-2 px-3 py-1.5 text-sm',
@@ -51,9 +51,9 @@
         <template v-else-if="!subOption.color">
           <i
             v-if="isShapeSelected(subOption)"
-            class="icon-[lucide--check] size-4 flex-shrink-0"
+            class="icon-[lucide--check] size-4 shrink-0"
           />
-          <div v-else class="w-4 flex-shrink-0" />
+          <div v-else class="w-4 shrink-0" />
           <span>{{ subOption.label }}</span>
         </template>
       </div>
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index e50de61766..7eb5687437 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -102,7 +102,7 @@
         <article
           v-for="release in releaseStore.recentReleases"
           :key="release.id || release.version"
-          class="release-menu-item flex h-12 min-h-6 cursor-pointer items-center gap-2 self-stretch rounded p-2 transition-colors hover:bg-interface-menu-component-surface-hovered"
+          class="release-menu-item flex h-12 min-h-6 cursor-pointer items-center gap-2 self-stretch rounded-sm p-2 transition-colors hover:bg-interface-menu-component-surface-hovered"
           role="button"
           tabindex="0"
           @click="onReleaseClick(release)"
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 79e8d7f8dd..388f3aedd2 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -154,7 +154,7 @@
         :style="popoverStyle"
       >
         <div
-          class="flex size-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+          class="flex size-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
           :class="
             slotProps.selected
               ? 'bg-primary-background'
diff --git a/src/components/input/SingleSelect.vue b/src/components/input/SingleSelect.vue
index 2a3f7cdee8..74485de35c 100644
--- a/src/components/input/SingleSelect.vue
+++ b/src/components/input/SingleSelect.vue
@@ -57,7 +57,7 @@
       option: ({ context }: SelectPassThroughMethodOptions<SelectOption>) => ({
         class: cn(
           // Row layout
-          'flex items-center justify-between gap-3 px-2 py-3 rounded',
+          'flex items-center justify-between gap-3 px-2 py-3 rounded-sm',
           'hover:bg-secondary-background-hover',
           // Add focus state for keyboard navigation
           context.focused && 'bg-secondary-background-hover',
diff --git a/src/components/queue/job/JobDetailsPopover.vue b/src/components/queue/job/JobDetailsPopover.vue
index ce762530fd..1bd02513df 100644
--- a/src/components/queue/job/JobDetailsPopover.vue
+++ b/src/components/queue/job/JobDetailsPopover.vue
@@ -82,7 +82,7 @@
           </Button>
         </div>
         <div
-          class="col-span-2 mt-2 rounded bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
+          class="col-span-2 mt-2 rounded-sm bg-interface-panel-hover-surface px-4 py-2 text-[0.75rem] leading-normal text-text-secondary"
         >
           {{ errorMessageValue }}
         </div>
diff --git a/src/components/queue/job/QueueAssetPreview.vue b/src/components/queue/job/QueueAssetPreview.vue
index d815065e98..771e5b6e2e 100644
--- a/src/components/queue/job/QueueAssetPreview.vue
+++ b/src/components/queue/job/QueueAssetPreview.vue
@@ -12,7 +12,7 @@
         />
         <div
           v-if="timeLabel"
-          class="absolute bottom-2 left-2 rounded px-2 py-0.5 text-xs text-text-primary"
+          class="absolute bottom-2 left-2 rounded-sm px-2 py-0.5 text-xs text-text-primary"
           :style="{
             background: 'rgba(217, 217, 217, 0.40)',
             backdropFilter: 'blur(2px)'
diff --git a/src/components/rightSidePanel/parameters/WidgetActions.vue b/src/components/rightSidePanel/parameters/WidgetActions.vue
index 08a50c4df9..43a96aed36 100644
--- a/src/components/rightSidePanel/parameters/WidgetActions.vue
+++ b/src/components/rightSidePanel/parameters/WidgetActions.vue
@@ -123,7 +123,7 @@ function handleResetToDefault() {
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleRename()
@@ -139,7 +139,7 @@ function handleResetToDefault() {
         v-if="hasParents"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             if (isShownOnParents) handleHideInput()
@@ -161,7 +161,7 @@ function handleResetToDefault() {
       <Button
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         @click="
           () => {
             handleToggleFavorite()
@@ -183,7 +183,7 @@ function handleResetToDefault() {
         v-if="hasDefault"
         variant="textonly"
         size="unset"
-        class="w-full flex items-center gap-2 rounded px-3 py-2 text-sm transition-all active:scale-95"
+        class="w-full flex items-center gap-2 rounded-sm px-3 py-2 text-sm transition-all active:scale-95"
         :disabled="isCurrentValueDefault"
         @click="
           () => {
diff --git a/src/components/rightSidePanel/settings/TabGlobalSettings.vue b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
index f91cbcabb4..220e206c32 100644
--- a/src/components/rightSidePanel/settings/TabGlobalSettings.vue
+++ b/src/components/rightSidePanel/settings/TabGlobalSettings.vue
@@ -136,7 +136,7 @@ function openFullSettings() {
           >
             <Slider
               :model-value="[gridSpacing]"
-              class="flex-grow text-xs"
+              class="grow text-xs"
               :min="GRID_SIZE_MIN"
               :max="GRID_SIZE_MAX"
               :step="GRID_SIZE_STEP"
diff --git a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
index 201b916876..623e5c2dc1 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphEditor.vue
@@ -282,7 +282,7 @@ onMounted(() => {
       >
         <Button
           size="sm"
-          class="rounded border-none px-3 py-0.5"
+          class="rounded-sm border-none px-3 py-0.5"
           @click.stop="showRecommended"
         >
           {{ $t('subgraphStore.showRecommended') }}
diff --git a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index b8b560c32f..1843ef9240 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -27,7 +27,7 @@ function getIcon() {
   <div
     :class="
       cn(
-        'flex py-1 px-2 break-all rounded items-center gap-1',
+        'flex py-1 px-2 break-all rounded-sm items-center gap-1',
         'bg-node-component-surface',
         props.isDraggable && 'hover:ring-1 ring-accent-background',
         props.class
diff --git a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
index 75885dfba3..ae0e44e442 100644
--- a/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
+++ b/src/components/searchbox/v2/NodeSearchCategorySidebar.vue
@@ -121,7 +121,7 @@ const categoryTree = computed<CategoryNode[]>(() => {
 
 function categoryBtnClass(id: string) {
   return cn(
-    'cursor-pointer border-none bg-transparent rounded px-3 py-2.5 text-left text-sm transition-colors',
+    'cursor-pointer border-none bg-transparent rounded-sm px-3 py-2.5 text-left text-sm transition-colors',
     selectedCategory.value === id
       ? CATEGORY_SELECTED_CLASS
       : CATEGORY_UNSELECTED_CLASS
diff --git a/src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue b/src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue
index 7d23d57c32..f7597f084c 100644
--- a/src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue
+++ b/src/components/searchbox/v2/NodeSearchCategoryTreeNode.vue
@@ -6,7 +6,7 @@
     :style="{ paddingLeft: `${0.75 + depth * 1.25}rem` }"
     :class="
       cn(
-        'w-full cursor-pointer rounded border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
+        'w-full cursor-pointer rounded-sm border-none bg-transparent py-2.5 pr-3 text-left text-sm transition-colors',
         selectedCategory === node.key
           ? CATEGORY_SELECTED_CLASS
           : CATEGORY_UNSELECTED_CLASS
diff --git a/src/components/searchbox/v2/NodeSearchListItem.vue b/src/components/searchbox/v2/NodeSearchListItem.vue
index 877a45e6ce..391d21560f 100644
--- a/src/components/searchbox/v2/NodeSearchListItem.vue
+++ b/src/components/searchbox/v2/NodeSearchListItem.vue
@@ -11,7 +11,7 @@
         <span v-if="showIdName">&nbsp;</span>
         <span
           v-if="showIdName"
-          class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+          class="rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
           v-html="highlightQuery(nodeDef.name, currentQuery)"
         />
 
@@ -28,7 +28,7 @@
             nodeDef.nodeSource.type !== NodeSourceType.Core &&
             nodeDef.nodeSource.type !== NodeSourceType.Unknown
           "
-          class="inline-flex shrink-0 rounded border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
+          class="inline-flex shrink-0 rounded-sm border border-border px-1.5 py-0.5 text-xs bg-base-foreground/5 text-base-foreground/70 mr-0.5"
         >
           {{ nodeDef.nodeSource.displayText }}
         </span>
@@ -46,31 +46,31 @@
     <div v-if="!showDescription" class="flex items-center gap-1">
       <span
         v-if="nodeDef.deprecated"
-        class="rounded bg-red-500/20 px-1.5 py-0.5 text-xs text-red-400"
+        class="rounded-sm bg-red-500/20 px-1.5 py-0.5 text-xs text-red-400"
       >
         {{ $t('g.deprecated') }}
       </span>
       <span
         v-if="nodeDef.experimental"
-        class="rounded bg-blue-500/20 px-1.5 py-0.5 text-xs text-blue-400"
+        class="rounded-sm bg-blue-500/20 px-1.5 py-0.5 text-xs text-blue-400"
       >
         {{ $t('g.experimental') }}
       </span>
       <span
         v-if="nodeDef.dev_only"
-        class="rounded bg-cyan-500/20 px-1.5 py-0.5 text-xs text-cyan-400"
+        class="rounded-sm bg-cyan-500/20 px-1.5 py-0.5 text-xs text-cyan-400"
       >
         {{ $t('g.devOnly') }}
       </span>
       <span
         v-if="showNodeFrequency && nodeFrequency > 0"
-        class="rounded bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
+        class="rounded-sm bg-secondary-background px-1.5 py-0.5 text-xs text-muted-foreground"
       >
         {{ formatNumberWithSuffix(nodeFrequency, { roundToInt: true }) }}
       </span>
       <span
         v-if="nodeDef.nodeSource.type !== NodeSourceType.Unknown"
-        class="rounded bg-secondary-background px-2 py-0.5 text-sm text-muted-foreground"
+        class="rounded-sm bg-secondary-background px-2 py-0.5 text-sm text-muted-foreground"
       >
         {{ nodeDef.nodeSource.displayText }}
       </span>
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 9a50b71d55..47b59517a3 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -60,7 +60,7 @@
         />
         <span
           v-if="item?.comfyCommand?.keybinding"
-          class="keybinding-tag ml-auto rounded border border-surface p-1 text-xs text-nowrap text-muted"
+          class="keybinding-tag ml-auto rounded-sm border border-surface p-1 text-xs text-nowrap text-muted"
         >
           {{ item.comfyCommand.keybinding.combo.toString() }}
         </span>
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 0faa70bca3..93f4c14e6f 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -154,7 +154,7 @@ const getTabTooltipSuffix = (tab: SidebarTabExtension) => {
 const isOverflowing = ref(false)
 const groupClasses = computed(() =>
   cn(
-    'sidebar-item-group flex flex-col items-center overflow-hidden flex-shrink-0',
+    'sidebar-item-group flex flex-col items-center overflow-hidden shrink-0',
     !isConnected.value && 'rounded-lg shadow-interface pointer-events-auto'
   )
 )
diff --git a/src/components/toast/ProgressToastItem.vue b/src/components/toast/ProgressToastItem.vue
index f9ee47cbb3..89a2bda3d8 100644
--- a/src/components/toast/ProgressToastItem.vue
+++ b/src/components/toast/ProgressToastItem.vue
@@ -35,7 +35,7 @@ const isPending = computed(() => job.status === 'created')
       }}</span>
     </div>
 
-    <div class="flex flex-shrink-0 items-center gap-2">
+    <div class="flex shrink-0 items-center gap-2">
       <template v-if="isFailed">
         <i
           class="icon-[lucide--circle-alert] size-4 text-destructive-background"
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
index 4edeeb3ca5..8400adc33f 100644
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@@ -16,7 +16,7 @@ const { class: className, ...restProps } = defineProps<
     :class="
       cn(
         'relative flex w-full cursor-pointer select-none items-center justify-between',
-        'gap-3 rounded px-2 py-3 text-sm outline-none',
+        'gap-3 rounded-sm px-2 py-3 text-sm outline-none',
         'hover:bg-secondary-background-hover',
         'focus:bg-secondary-background-hover',
         'data-[state=checked]:bg-secondary-background-selected',
diff --git a/src/components/ui/stepper/FormattedNumberStepper.vue b/src/components/ui/stepper/FormattedNumberStepper.vue
index 2de6bbf131..21018781bd 100644
--- a/src/components/ui/stepper/FormattedNumberStepper.vue
+++ b/src/components/ui/stepper/FormattedNumberStepper.vue
@@ -28,7 +28,7 @@
         type="text"
         inputmode="numeric"
         :style="{ width: `${inputWidth}ch` }"
-        class="min-w-0 rounded border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
+        class="min-w-0 rounded-sm border-none bg-transparent text-center text-base-foreground font-medium text-lg focus-visible:outline-none"
         :disabled="disabled"
         @input="handleInputChange"
         @blur="handleInputBlur"
diff --git a/src/platform/assets/components/AssetBadgeGroup.vue b/src/platform/assets/components/AssetBadgeGroup.vue
index 46c39e9173..6e899b89c2 100644
--- a/src/platform/assets/components/AssetBadgeGroup.vue
+++ b/src/platform/assets/components/AssetBadgeGroup.vue
@@ -7,7 +7,7 @@
       :key="badge.label"
       :class="
         cn(
-          'px-2 py-1 rounded text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
+          'px-2 py-1 rounded-sm text-xs font-bold uppercase tracking-wider text-modal-card-tag-foreground bg-modal-card-tag-background break-all'
         )
       "
     >
diff --git a/src/platform/assets/components/Media3DTop.vue b/src/platform/assets/components/Media3DTop.vue
index b5b7f0c609..977558a921 100644
--- a/src/platform/assets/components/Media3DTop.vue
+++ b/src/platform/assets/components/Media3DTop.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <img
       v-if="!thumbnailError"
       :src="thumbnailSrc"
diff --git a/src/platform/assets/components/MediaAssetCard.vue b/src/platform/assets/components/MediaAssetCard.vue
index 00362de2fa..df6206b1ae 100644
--- a/src/platform/assets/components/MediaAssetCard.vue
+++ b/src/platform/assets/components/MediaAssetCard.vue
@@ -87,13 +87,15 @@
       <div v-if="loading" class="flex justify-between items-start">
         <div class="flex flex-col gap-1">
           <div
-            class="h-4 w-24 animate-pulse rounded bg-modal-card-background"
+            class="h-4 w-24 animate-pulse rounded-sm bg-modal-card-background"
           />
           <div
-            class="h-3 w-20 animate-pulse rounded bg-modal-card-background"
+            class="h-3 w-20 animate-pulse rounded-sm bg-modal-card-background"
           />
         </div>
-        <div class="h-6 w-12 animate-pulse rounded bg-modal-card-background" />
+        <div
+          class="h-6 w-12 animate-pulse rounded-sm bg-modal-card-background"
+        />
       </div>
 
       <!-- Content -->
@@ -113,7 +115,7 @@
         </div>
 
         <!-- Right side: Output count -->
-        <div v-if="showOutputCount" class="flex-shrink-0">
+        <div v-if="showOutputCount" class="shrink-0">
           <Button
             v-tooltip.top.pt:pointer-events-none="
               $t('mediaAsset.actions.seeMoreOutputs')
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index 770b6ae21f..dc7cbe82bc 100644
--- a/src/platform/assets/components/MediaAssetFilterMenu.vue
+++ b/src/platform/assets/components/MediaAssetFilterMenu.vue
@@ -24,7 +24,7 @@ TODO: Extract checkbox pattern into reusable Checkbox component
       @keydown.space.prevent="toggleMediaType(filter.type)"
     >
       <div
-        class="flex h-4 w-4 shrink-0 items-center justify-center rounded p-0.5 transition-all duration-200"
+        class="flex h-4 w-4 shrink-0 items-center justify-center rounded-sm p-0.5 transition-all duration-200"
         :class="
           mediaTypeFilters.includes(filter.type)
             ? 'bg-primary-background border-primary-background'
diff --git a/src/platform/assets/components/MediaAudioTop.vue b/src/platform/assets/components/MediaAudioTop.vue
index 2cad5da45c..64ea8bbcbf 100644
--- a/src/platform/assets/components/MediaAudioTop.vue
+++ b/src/platform/assets/components/MediaAudioTop.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full flex-col items-center justify-center gap-2 bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >
diff --git a/src/platform/assets/components/MediaImageTop.vue b/src/platform/assets/components/MediaImageTop.vue
index 8bd64fe6c4..2aa6722645 100644
--- a/src/platform/assets/components/MediaImageTop.vue
+++ b/src/platform/assets/components/MediaImageTop.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative size-full overflow-hidden rounded bg-modal-card-placeholder-background"
+    class="relative size-full overflow-hidden rounded-sm bg-modal-card-placeholder-background"
     @dblclick="emit('view')"
   >
     <img
diff --git a/src/platform/assets/components/MediaOtherTop.vue b/src/platform/assets/components/MediaOtherTop.vue
index e976e9be76..896d4a4426 100644
--- a/src/platform/assets/components/MediaOtherTop.vue
+++ b/src/platform/assets/components/MediaOtherTop.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >
diff --git a/src/platform/assets/components/MediaTextTop.vue b/src/platform/assets/components/MediaTextTop.vue
index 048151e975..75f3831cdb 100644
--- a/src/platform/assets/components/MediaTextTop.vue
+++ b/src/platform/assets/components/MediaTextTop.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative size-full overflow-hidden rounded">
+  <div class="relative size-full overflow-hidden rounded-sm">
     <div
       class="flex size-full items-center justify-center bg-modal-card-placeholder-background transition-transform duration-300 group-hover:scale-105 group-data-[selected=true]:scale-105"
     >
diff --git a/src/platform/assets/components/MediaVideoTop.vue b/src/platform/assets/components/MediaVideoTop.vue
index a602a86eef..6a0dacce06 100644
--- a/src/platform/assets/components/MediaVideoTop.vue
+++ b/src/platform/assets/components/MediaVideoTop.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative size-full overflow-hidden rounded bg-black"
+    class="relative size-full overflow-hidden rounded-sm bg-black"
     @mouseenter="isHovered = true"
     @mouseleave="isHovered = false"
   >
diff --git a/src/platform/assets/components/ModelImportProgressDialog.vue b/src/platform/assets/components/ModelImportProgressDialog.vue
index 941ce4c969..03bbf84aa4 100644
--- a/src/platform/assets/components/ModelImportProgressDialog.vue
+++ b/src/platform/assets/components/ModelImportProgressDialog.vue
@@ -176,7 +176,7 @@ function closeDialog() {
       >
         <div class="flex min-w-0 flex-1 items-center gap-2 text-sm">
           <template v-if="isInProgress">
-            <Loader size="sm" class="flex-shrink-0 text-muted-foreground" />
+            <Loader size="sm" class="shrink-0 text-muted-foreground" />
             <span
               class="min-w-0 flex-1 truncate font-bold text-base-foreground"
             >
@@ -185,7 +185,7 @@ function closeDialog() {
           </template>
           <template v-else-if="failedJobs.length > 0">
             <i
-              class="icon-[lucide--circle-alert] size-4 flex-shrink-0 text-destructive-background"
+              class="icon-[lucide--circle-alert] size-4 shrink-0 text-destructive-background"
             />
             <span class="min-w-0 truncate font-bold text-base-foreground">
               {{
@@ -197,7 +197,7 @@ function closeDialog() {
           </template>
           <template v-else>
             <i
-              class="icon-[lucide--check-circle] size-4 flex-shrink-0 text-jade-600"
+              class="icon-[lucide--check-circle] size-4 shrink-0 text-jade-600"
             />
             <span class="min-w-0 truncate font-bold text-base-foreground">
               {{ t('progressToast.allDownloadsCompleted') }}
@@ -205,7 +205,7 @@ function closeDialog() {
           </template>
         </div>
 
-        <div class="flex flex-shrink-0 items-center gap-2">
+        <div class="flex shrink-0 items-center gap-2">
           <span
             v-if="isInProgress"
             class="whitespace-nowrap text-sm text-muted-foreground"
diff --git a/src/platform/assets/components/UploadModelConfirmation.vue b/src/platform/assets/components/UploadModelConfirmation.vue
index 53beb03a1f..722d566dce 100644
--- a/src/platform/assets/components/UploadModelConfirmation.vue
+++ b/src/platform/assets/components/UploadModelConfirmation.vue
@@ -11,7 +11,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <p class="m-0 min-w-0 flex-1 truncate text-base-foreground">
           {{ metadata?.filename || metadata?.name }}
diff --git a/src/platform/assets/components/UploadModelDialog.vue b/src/platform/assets/components/UploadModelDialog.vue
index 5691d90b77..efbff2ca37 100644
--- a/src/platform/assets/components/UploadModelDialog.vue
+++ b/src/platform/assets/components/UploadModelDialog.vue
@@ -32,7 +32,7 @@
 
     <!-- Navigation Footer - always visible -->
     <UploadModelFooter
-      class="flex-shrink-0"
+      class="shrink-0"
       :current-step="currentStep"
       :is-fetching-metadata="isFetchingMetadata"
       :is-uploading="isUploading"
diff --git a/src/platform/assets/components/UploadModelProgress.vue b/src/platform/assets/components/UploadModelProgress.vue
index a1cb40b6f8..6f169aa7dc 100644
--- a/src/platform/assets/components/UploadModelProgress.vue
+++ b/src/platform/assets/components/UploadModelProgress.vue
@@ -16,7 +16,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
@@ -47,7 +47,7 @@
           v-if="previewImage"
           :src="previewImage"
           :alt="metadata?.filename || metadata?.name || 'Model preview'"
-          class="size-14 flex-shrink-0 rounded object-cover"
+          class="size-14 shrink-0 rounded-sm object-cover"
         />
         <div
           class="flex min-w-0 flex-1 flex-col items-start justify-center gap-1"
diff --git a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
index 3e403a6ea1..ebc410a537 100644
--- a/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
+++ b/src/platform/cloud/onboarding/CloudAuthTimeoutView.vue
@@ -9,7 +9,7 @@
       </p>
 
       <!-- Troubleshooting Section -->
-      <div class="mb-4 rounded bg-secondary-background px-3 py-2 text-left">
+      <div class="mb-4 rounded-sm bg-secondary-background px-3 py-2 text-left">
         <h3 class="mb-2 text-sm font-semibold text-text-primary">
           {{ $t('cloudOnboarding.authTimeout.troubleshooting') }}
         </h3>
@@ -28,7 +28,7 @@
       <!-- Technical Details (Collapsible) -->
       <div v-if="errorMessage" class="mb-4 text-left">
         <button
-          class="flex w-full items-center justify-between rounded bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
+          class="flex w-full items-center justify-between rounded-sm bg-secondary-background px-4 py-2 text-sm text-text-secondary transition-colors hover:bg-secondary-background-hover border-0"
           @click="showTechnicalDetails = !showTechnicalDetails"
         >
           <span>{{ $t('cloudOnboarding.authTimeout.technicalDetails') }}</span>
@@ -41,7 +41,7 @@
         </button>
         <div
           v-if="showTechnicalDetails"
-          class="mt-2 rounded border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
+          class="mt-2 rounded-sm border-muted-background border p-4 font-mono text-xs text-muted-foreground break-all"
         >
           {{ errorMessage }}
         </div>
diff --git a/src/platform/secrets/components/SecretListItem.vue b/src/platform/secrets/components/SecretListItem.vue
index 480d3d40a3..1d8ac592b1 100644
--- a/src/platform/secrets/components/SecretListItem.vue
+++ b/src/platform/secrets/components/SecretListItem.vue
@@ -13,7 +13,7 @@
         />
         <span
           v-else-if="secret.provider"
-          class="rounded bg-base-surface px-2 py-0.5 text-xs text-muted"
+          class="rounded-sm bg-base-surface px-2 py-0.5 text-xs text-muted"
         >
           {{ providerLabel }}
         </span>
diff --git a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
index d6ac6ad23f..60ff16f91b 100644
--- a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
@@ -12,7 +12,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         @click="() => handleClose()"
       >
         <i class="icon-[lucide--x] size-6" />
diff --git a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
index 6a56358f8d..629fe47071 100644
--- a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
+++ b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
@@ -6,12 +6,12 @@
         <div
           v-for="i in 2"
           :key="i"
-          class="flex h-[54px] animate-pulse items-center gap-2 rounded px-2 py-4"
+          class="flex h-[54px] animate-pulse items-center gap-2 rounded-sm px-2 py-4"
         >
           <div class="size-8 rounded-full bg-secondary-background" />
           <div class="flex flex-1 flex-col gap-1">
-            <div class="h-4 w-24 rounded bg-secondary-background" />
-            <div class="h-3 w-16 rounded bg-secondary-background" />
+            <div class="h-4 w-24 rounded-sm bg-secondary-background" />
+            <div class="h-3 w-16 rounded-sm bg-secondary-background" />
           </div>
         </div>
       </div>
@@ -23,7 +23,7 @@
             <div
               :class="
                 cn(
-                  'group flex h-[54px] w-full items-center gap-2 rounded px-2 py-4',
+                  'group flex h-[54px] w-full items-center gap-2 rounded-sm px-2 py-4',
                   'hover:bg-secondary-background-hover',
                   isCurrentWorkspace(workspace) && 'bg-secondary-background'
                 )
@@ -72,7 +72,7 @@
         <div
           :class="
             cn(
-              'flex h-12 w-full items-center gap-2 rounded px-2 py-2',
+              'flex h-12 w-full items-center gap-2 rounded-sm px-2 py-2',
               canCreateWorkspace
                 ? 'cursor-pointer hover:bg-secondary-background-hover'
                 : 'cursor-default'
diff --git a/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
index 6dca4c414d..5b3be2f25b 100644
--- a/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.createWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
index dea2da18d9..9319f507bd 100644
--- a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.deleteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
index 60958bae63..f27457f944 100644
--- a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.editWorkspaceDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
index bdf614e956..635f1e1022 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
index 65fdc96dd4..a44c369123 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
@@ -14,7 +14,7 @@
         }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onDismiss"
       >
diff --git a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
index 6a3d16c363..5f22d8e0f7 100644
--- a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.leaveDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
index 2d085bec41..b43988c876 100644
--- a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.removeMemberDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
index 1d9dacd9ac..ab0317a9b0 100644
--- a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
@@ -10,7 +10,7 @@
         {{ $t('workspacePanel.revokeInviteDialog.title') }}
       </h2>
       <button
-        class="cursor-pointer rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
+        class="cursor-pointer rounded-sm border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-base-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-secondary-foreground"
         :aria-label="$t('g.close')"
         @click="onCancel"
       >
diff --git a/src/renderer/extensions/linearMode/LinearWelcome.vue b/src/renderer/extensions/linearMode/LinearWelcome.vue
index 5ba625a5c1..8670d7812e 100644
--- a/src/renderer/extensions/linearMode/LinearWelcome.vue
+++ b/src/renderer/extensions/linearMode/LinearWelcome.vue
@@ -33,7 +33,7 @@ const { hasOutputs } = storeToRefs(appModeStore)
         <i18n-t keypath="linearMode.welcome.getStarted" tag="span">
           <template #runButton>
             <span
-              class="inline-flex items-center px-3.5 py-0.5 mx-0.5 transform -translate-y-0.5 rounded bg-primary-background text-base-foreground text-xxs font-medium cursor-default"
+              class="inline-flex items-center px-3.5 py-0.5 mx-0.5 transform -translate-y-0.5 rounded-sm bg-primary-background text-base-foreground text-xxs font-medium cursor-default"
             >
               {{ t('menu.run') }}
             </span>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
index 8679b11c7f..43a8e9f347 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
@@ -76,7 +76,7 @@ const controlMode = defineModel<ControlOptions>()
       >
         <div class="flex items-center gap-2 flex-1 min-w-0 text-wrap">
           <div
-            class="flex items-center justify-center w-8 h-8 rounded-lg flex-shrink-0 bg-secondary-background border border-border-subtle"
+            class="flex items-center justify-center w-8 h-8 rounded-lg shrink-0 bg-secondary-background border border-border-subtle"
           >
             <i
               v-if="option.icon"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index a28af6d2a8..f6ca4d4b08 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-1">
-    <div class="max-h-[48rem] rounded border p-4">
+    <div class="max-h-[48rem] rounded-sm border p-4">
       <Chart
         :type="chartType"
         :data="chartData"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
index a7f1463552..1e353b5bcc 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue
@@ -4,7 +4,7 @@
       <Slider
         :model-value="[modelValue]"
         v-bind="filteredProps"
-        class="flex-grow text-xs"
+        class="grow text-xs"
         :step="stepValue"
         :aria-label="widget.name"
         @update:model-value="updateLocalValue"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
index 0d7ff3748a..623b1c4304 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/audio/AudioPreviewPlayer.vue
@@ -20,7 +20,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.playPause')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="togglePlayPause"
         >
           <i
@@ -61,7 +61,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.volume')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="toggleMute"
         >
           <i
@@ -94,7 +94,7 @@
           variant="textonly"
           size="unset"
           :aria-label="$t('g.moreOptions')"
-          class="size-6 rounded"
+          class="size-6 rounded-sm"
           @click="toggleOptionsMenu"
         >
           <i class="text-secondary icon-[lucide--more-vertical] size-4" />
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
index f62a40de0a..bf9ec58b01 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.test.ts
@@ -93,7 +93,7 @@ describe('FormSelectButton Core Component', () => {
       expect(button.classes()).toContain('h-6')
       expect(button.classes()).toContain('px-5')
       expect(button.classes()).toContain('py-[5px]')
-      expect(button.classes()).toContain('rounded')
+      expect(button.classes()).toContain('rounded-sm')
       expect(button.classes()).toContain('text-center')
       expect(button.classes()).toContain('text-xs')
       expect(button.classes()).toContain('font-normal')
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index 2a669164d1..0aa72c4aef 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -9,7 +9,7 @@
       :key="getOptionValue(option, index)"
       :class="
         cn(
-          'flex-1 min-w-0 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
+          'flex-1 min-w-0 h-6 px-5 py-[5px] rounded-sm flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate',
           'bg-transparent border-none',
           'text-center text-xs font-normal',
           {
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
index ae9900ec6f..ee52710d5f 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue
@@ -85,7 +85,7 @@ const theButtonStyle = computed(() =>
         class="icon-[lucide--chevron-down]"
         :class="
           cn(
-            'mr-2 size-4 transition-transform duration-200 flex-shrink-0 text-component-node-foreground-secondary',
+            'mr-2 size-4 transition-transform duration-200 shrink-0 text-component-node-foreground-secondary',
             isOpen && 'rotate-180'
           )
         "
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
index 53377f3a6d..df4b4b50a2 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
@@ -16,7 +16,7 @@
         <em v-else-if="segment.type === 'italic'">{{ segment.text }}</em>
         <code
           v-else-if="segment.type === 'code'"
-          class="rounded px-1 py-0.5 text-xs"
+          class="rounded-sm px-1 py-0.5 text-xs"
           >{{ segment.text }}</code
         >
         <span v-else>{{ segment.text }}</span>
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
index 9643155bb5..e495dce279 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -7,7 +7,10 @@
     >
       <!-- Import failed conflicts show detailed error message -->
       <template v-if="conflict.type === 'import_failed'">
-        <div v-if="conflict.required_value" class="overflow-x-hidden rounded">
+        <div
+          v-if="conflict.required_value"
+          class="overflow-x-hidden rounded-sm"
+        >
           <p class="m-0 text-xs text-muted-foreground break-all font-mono">
             {{ conflict.required_value }}
           </p>