From 1221756e059bbbe068004c663c70d1391185a1ad Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Thu, 5 Mar 2026 17:07:46 -0800
Subject: [PATCH] fix: enable enforce-canonical-classes tailwind lint rule
 (#9427)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Enable `better-tailwindcss/enforce-canonical-classes` lint rule and
auto-fix all 611 violations across 173 files. Stacked on #9417.

## Changes

- **What**: Simplify Tailwind classes to canonical forms via `eslint
--fix`:
  - `h-X w-X` → `size-X`
  - `overflow-x-hidden overflow-y-hidden` → `overflow-hidden`
  - and other canonical simplifications
- Enable `enforce-canonical-classes` as `'error'` in eslint config

## Review Focus

Mechanical auto-fix PR — all changes produced by `eslint --fix`. No
visual or behavioral changes; canonical forms are functionally
identical.

**Stack:** #9417 → **this PR** → PR 3 (class order)

Fixes #9300 (partial — 2 of 3 rules)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-9427-fix-enable-enforce-canonical-classes-tailwind-lint-rule-31a6d73d365081a49340d7d4640ede45)
by [Unito](https://www.unito.io)
---
 eslint.config.ts                              |  4 +--
 .../LiteGraphCanvasSplitterOverlay.vue        |  6 ++--
 src/components/TopMenuSection.vue             |  2 +-
 .../tabs/terminal/BaseTerminal.vue            |  7 ++---
 .../tabs/terminal/LogsTerminal.vue            |  2 +-
 .../breadcrumb/SubgraphBreadcrumb.vue         |  2 +-
 .../breadcrumb/SubgraphBreadcrumbItem.vue     |  2 +-
 src/components/builder/AppBuilder.vue         |  2 +-
 src/components/builder/BuilderDialog.vue      |  4 +--
 .../builder/ConnectOutputPopover.vue          |  6 ++--
 src/components/card/CardTop.vue               |  2 +-
 src/components/common/DropdownItem.vue        |  2 +-
 src/components/common/DropdownMenu.vue        |  2 +-
 src/components/common/FormImageUpload.vue     |  2 +-
 src/components/common/LazyImage.vue           |  2 +-
 src/components/common/MarqueeLine.vue         |  4 +--
 src/components/common/TreeExplorerV2.vue      |  2 +-
 src/components/common/WorkflowActionsList.vue |  6 ++--
 .../widget/WorkflowTemplateSelectorDialog.vue | 16 ++++-------
 src/components/dialog/confirm/ConfirmBody.vue |  2 +-
 .../content/ConfirmationDialogContent.vue     |  6 ++--
 .../dialog/content/ErrorDialogContent.vue     |  4 ++-
 .../content/MissingCoreNodesMessage.vue       |  2 +-
 .../dialog/content/MissingModelsContent.vue   | 16 ++++-------
 .../dialog/content/MissingModelsFooter.vue    |  2 +-
 .../dialog/content/MissingNodesContent.vue    | 12 ++++----
 .../dialog/content/MissingNodesFooter.vue     |  2 +-
 .../dialog/content/SignInContent.vue          |  4 +--
 .../TopUpCreditsDialogContentLegacy.vue       |  4 +--
 .../dialog/content/setting/UserPanel.vue      |  2 +-
 .../dialog/content/signin/ApiKeyForm.vue      |  2 +-
 .../dialog/content/signin/SignInForm.vue      |  2 +-
 .../dialog/content/signin/SignUpForm.vue      |  2 +-
 .../CancelSubscriptionDialogContent.vue       |  4 +--
 src/components/error/ErrorOverlay.vue         |  4 +--
 .../gradientslider/GradientSlider.vue         |  2 +-
 src/components/graph/CanvasModeSelector.vue   |  8 +++---
 src/components/graph/GraphCanvas.vue          |  4 +--
 src/components/graph/GraphCanvasMenu.vue      | 16 +++++------
 .../selectionToolbox/ColorPickerMenu.vue      |  2 +-
 src/components/graph/widgets/DomWidget.vue    |  4 +--
 .../helpcenter/HelpCenterMenuContent.vue      |  4 +--
 src/components/imagecrop/WidgetImageCrop.vue  |  4 +--
 src/components/input/MultiSelect.vue          |  4 +--
 src/components/load3d/Load3DScene.vue         |  2 +-
 src/components/load3d/Load3dViewerContent.vue |  2 +-
 .../load3d/controls/SceneControls.vue         |  4 +--
 .../maskeditor/BrushSettingsPanel.vue         |  4 +--
 .../maskeditor/ColorSelectSettingsPanel.vue   |  4 +--
 .../maskeditor/ImageLayerSettingsPanel.vue    | 12 ++++----
 .../maskeditor/MaskEditorContent.vue          | 12 ++++----
 .../maskeditor/PaintBucketSettingsPanel.vue   |  4 +--
 src/components/maskeditor/SidePanel.vue       |  4 +--
 .../maskeditor/controls/DropdownControl.vue   |  2 +-
 .../maskeditor/controls/SliderControl.vue     |  2 +-
 .../maskeditor/controls/ToggleControl.vue     |  2 +-
 .../maskeditor/dialog/TopBarHeader.vue        | 12 ++++----
 src/components/painter/WidgetPainter.vue      |  4 +--
 .../queue/JobHistoryActionsMenu.vue           |  4 +--
 src/components/queue/QueueOverlayActive.vue   |  2 +-
 .../queue/dialogs/QueueClearHistoryDialog.vue |  6 ++--
 src/components/queue/job/JobContextMenu.vue   |  2 +-
 .../queue/job/JobDetailsPopover.vue           | 28 ++++++++-----------
 src/components/queue/job/JobFilterActions.vue |  4 +--
 .../queue/job/QueueAssetPreview.vue           |  6 ++--
 src/components/queue/job/QueueJobItem.vue     |  6 ++--
 .../rightSidePanel/errors/ErrorNodeCard.vue   |  4 +--
 .../rightSidePanel/errors/MissingNodeCard.vue |  4 +--
 .../errors/MissingPackGroupRow.vue            |  8 +++---
 .../rightSidePanel/errors/TabErrors.vue       |  2 +-
 .../rightSidePanel/parameters/WidgetItem.vue  |  4 +--
 .../rightSidePanel/settings/LayoutField.vue   |  2 +-
 .../subgraph/SubgraphNodeWidget.vue           |  2 +-
 src/components/sidebar/ComfyMenuButton.vue    |  2 +-
 src/components/sidebar/SideToolbar.vue        |  2 +-
 .../sidebar/tabs/AssetsSidebarGridView.vue    |  2 +-
 .../sidebar/tabs/AssetsSidebarListView.vue    |  2 +-
 .../sidebar/tabs/NodeLibrarySidebarTabV2.vue  |  4 +--
 .../sidebar/tabs/SidebarTabTemplate.vue       |  2 +-
 .../tabs/modelLibrary/ModelTreeLeaf.vue       |  2 +-
 .../tabs/nodeLibrary/EssentialNodeCard.vue    |  2 +-
 .../tabs/nodeLibrary/NodeDragPreview.vue      |  2 +-
 .../sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue |  2 +-
 .../templates/thumbnails/AudioThumbnail.vue   |  2 +-
 .../templates/thumbnails/BaseThumbnail.vue    |  6 ++--
 .../thumbnails/HoverDissolveThumbnail.vue     |  2 +-
 .../templates/thumbnails/LogoOverlay.vue      |  2 +-
 .../ui/search-input/searchInput.variants.ts   |  4 +--
 src/components/ui/select/SelectItem.vue       |  2 +-
 src/components/ui/select/SelectTrigger.vue    |  2 +-
 src/components/ui/slider/Slider.vue           |  2 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |  2 +-
 src/components/widget/SampleModelSelector.vue |  4 +--
 .../widget/layout/BaseModalLayout.vue         |  2 +-
 .../assets/components/AssetBrowserModal.vue   |  2 +-
 src/platform/assets/components/AssetCard.vue  |  2 +-
 .../components/AssetExportProgressDialog.vue  |  2 +-
 .../components/MediaAssetFilterMenu.vue       |  2 +-
 src/platform/assets/components/MediaTitle.vue |  2 +-
 .../components/ModelImportProgressDialog.vue  |  2 +-
 .../assets/components/UploadModelUrlInput.vue |  4 +--
 .../onboarding/CloudForgotPasswordView.vue    |  4 +--
 .../cloud/onboarding/CloudLoginView.vue       |  4 +--
 .../cloud/onboarding/CloudSignupView.vue      |  4 +--
 .../CloudSubscriptionRedirectView.vue         | 12 +++-----
 .../cloud/onboarding/UserCheckView.vue        |  2 +-
 .../onboarding/components/CloudSignInForm.vue |  2 +-
 .../onboarding/components/CloudTemplate.vue   |  4 +--
 .../skeletons/CloudLoginViewSkeleton.vue      |  2 +-
 .../components/FreeTierDialogContent.vue      |  4 +--
 .../subscription/components/PricingTable.vue  | 20 ++++++-------
 .../components/SubscriptionPanel.vue          |  2 +-
 .../SubscriptionRequiredDialogContent.vue     |  4 +--
 .../components/SwapNodeGroupRow.vue           |  6 ++--
 .../components/SwapNodesCard.vue              |  2 +-
 .../secrets/components/SecretListItem.vue     |  2 +-
 .../secrets/components/SecretsPanel.vue       |  2 +-
 src/platform/surveys/NightlySurveyPopover.vue |  2 +-
 .../components/ReleaseNotificationToast.vue   |  4 +--
 .../updates/components/WhatsNewPopup.vue      |  2 +-
 .../workspace/auth/WorkspaceAuthGate.vue      |  2 +-
 .../components/PricingTableWorkspace.vue      | 20 ++++++-------
 ...criptionRequiredDialogContentWorkspace.vue |  2 +-
 ...SubscriptionTransitionPreviewWorkspace.vue |  4 +--
 .../TopUpCreditsDialogContentWorkspace.vue    |  4 +--
 .../components/WorkspaceSwitcherPopover.vue   |  4 +--
 .../dialogs/CreateWorkspaceDialogContent.vue  |  4 +--
 .../dialogs/DeleteWorkspaceDialogContent.vue  |  4 +--
 .../dialogs/EditWorkspaceDialogContent.vue    |  4 +--
 .../dialogs/InviteMemberDialogContent.vue     |  8 +++---
 .../InviteMemberUpsellDialogContent.vue       |  4 +--
 .../dialogs/LeaveWorkspaceDialogContent.vue   |  4 +--
 .../dialogs/RemoveMemberDialogContent.vue     |  4 +--
 .../dialogs/RevokeInviteDialogContent.vue     |  4 +--
 .../settings/WorkspacePanelContent.vue        |  4 +--
 .../core/layout/transform/TransformPane.vue   |  2 +-
 .../extensions/linearMode/AppOutput.vue       |  2 +-
 .../extensions/linearMode/ImagePreview.vue    |  4 +--
 .../extensions/linearMode/LinearControls.vue  |  8 +++---
 .../extensions/linearMode/LinearPreview.vue   |  2 +-
 .../extensions/linearMode/MobileDisplay.vue   |  8 +++---
 .../extensions/linearMode/Preview3d.vue       |  2 +-
 .../extensions/vueNodes/VideoPreview.vue      | 10 +++----
 .../vueNodes/components/ImagePreview.vue      | 10 +++----
 .../vueNodes/components/LGraphNode.vue        |  6 ++--
 .../vueNodes/components/LGraphNodePreview.vue |  2 +-
 .../vueNodes/components/LivePreview.vue       |  2 +-
 .../vueNodes/components/NodeHeader.vue        |  4 +--
 .../vueNodes/components/NodeSlots.vue         |  2 +-
 .../components/ValueControlPopover.vue        | 10 +++----
 .../widgets/components/WidgetChart.vue        |  2 +-
 .../widgets/components/WidgetColorPicker.vue  |  2 +-
 .../vueNodes/widgets/components/WidgetDOM.vue |  2 +-
 .../widgets/components/WidgetGalleria.vue     |  4 +--
 .../form/dropdown/FormDropdownMenu.vue        |  2 +-
 .../form/dropdown/FormDropdownMenuFilter.vue  |  2 +-
 .../form/dropdown/FormDropdownMenuItem.vue    |  8 +++---
 src/views/GraphView.vue                       |  2 +-
 src/views/LinearView.vue                      |  2 +-
 src/views/layouts/LayoutDefault.vue           |  2 +-
 .../components/ManagerProgressToast.vue       |  4 +--
 .../manager/ImportFailedNodeContent.vue       |  4 +--
 .../components/manager/ManagerDialog.vue      |  4 +--
 .../manager/NodeConflictDialogContent.vue     |  4 +--
 .../components/manager/PackStatusMessage.vue  |  2 +-
 .../manager/PackVersionSelectorPopover.vue    |  2 +-
 .../manager/button/PackEnableToggle.vue       |  2 +-
 .../manager/infoPanel/MarkdownText.vue        |  4 +--
 .../infoPanel/tabs/DescriptionTabPanel.vue    |  2 +-
 .../infoPanel/tabs/WarningTabPanel.vue        |  2 +-
 .../manager/packBanner/PackBanner.vue         | 10 +++----
 .../components/manager/packCard/PackCard.vue  |  8 +++---
 .../manager/packCard/PackCardFooter.vue       |  2 +-
 .../manager/skeleton/PackCardSkeleton.vue     |  2 +-
 174 files changed, 344 insertions(+), 385 deletions(-)

diff --git a/eslint.config.ts b/eslint.config.ts
index 199c7d91b7..892a94ab9c 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -128,9 +128,7 @@ export default defineConfig([
       'better-tailwindcss/enforce-consistent-line-wrapping': 'off',
       // Off: large batch change, enable and apply with `eslint --fix`
       'better-tailwindcss/enforce-consistent-class-order': 'off',
-      // 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',
+      'better-tailwindcss/enforce-canonical-classes': 'error',
       'better-tailwindcss/no-deprecated-classes': 'error'
     }
   },
diff --git a/src/components/LiteGraphCanvasSplitterOverlay.vue b/src/components/LiteGraphCanvasSplitterOverlay.vue
index 7de233850b..498dc680bd 100644
--- a/src/components/LiteGraphCanvasSplitterOverlay.vue
+++ b/src/components/LiteGraphCanvasSplitterOverlay.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
+    class="size-full absolute top-0 left-0 z-999 pointer-events-none flex flex-col"
   >
     <slot name="workflow-tabs" />
 
@@ -60,11 +60,11 @@
           <slot name="topmenu" :sidebar-panel-visible />
 
           <Splitter
-            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mr-1 mb-1 ml-1 flex-1"
+            class="bg-transparent pointer-events-none border-none splitter-overlay-bottom mx-1 mb-1 flex-1"
             layout="vertical"
             :pt:gutter="
               cn(
-                'rounded-tl-lg rounded-tr-lg',
+                'rounded-t-lg',
                 !(bottomPanelVisible && !focusMode) && 'hidden'
               )
             "
diff --git a/src/components/TopMenuSection.vue b/src/components/TopMenuSection.vue
index c23df7bd49..81dde281d2 100644
--- a/src/components/TopMenuSection.vue
+++ b/src/components/TopMenuSection.vue
@@ -102,7 +102,7 @@
         :to="inlineProgressSummaryTarget"
       >
         <div
-          class="pointer-events-none absolute left-0 right-0 top-full mt-1 flex justify-end pr-1"
+          class="pointer-events-none absolute inset-x-0 top-full mt-1 flex justify-end pr-1"
         >
           <QueueInlineProgressSummary
             :hidden="shouldHideInlineProgressSummary"
diff --git a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
index 3abe7b8cac..e50a77de95 100644
--- a/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
@@ -1,9 +1,6 @@
 <template>
-  <div
-    ref="rootEl"
-    class="relative h-full w-full overflow-hidden bg-neutral-900"
-  >
-    <div class="p-terminal h-full w-full rounded-none p-2">
+  <div ref="rootEl" class="relative size-full overflow-hidden bg-neutral-900">
+    <div class="p-terminal size-full rounded-none p-2">
       <div ref="terminalEl" class="terminal-host h-full" />
     </div>
     <Button
diff --git a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
index 98cdb450e5..93b987ee5c 100644
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full w-full bg-transparent">
+  <div class="size-full bg-transparent">
     <p v-if="errorMessage" class="p-4 text-center">
       {{ errorMessage }}
     </p>
diff --git a/src/components/breadcrumb/SubgraphBreadcrumb.vue b/src/components/breadcrumb/SubgraphBreadcrumb.vue
index 8e6f72e574..cee7223de4 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumb.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumb.vue
@@ -17,7 +17,7 @@
     <WorkflowActionsDropdown source="breadcrumb_subgraph_menu_selected" />
     <Button
       v-if="isInSubgraph"
-      class="back-button pointer-events-auto h-8 w-8 shrink-0 border border-transparent bg-transparent p-0 ml-1.5 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
+      class="back-button pointer-events-auto size-8 shrink-0 border border-transparent bg-transparent p-0 ml-1.5 transition-all hover:rounded-lg hover:border-interface-stroke hover:bg-comfy-menu-bg"
       text
       severity="secondary"
       size="small"
diff --git a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
index 31d730150a..20739cab7a 100644
--- a/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
+++ b/src/components/breadcrumb/SubgraphBreadcrumbItem.vue
@@ -42,7 +42,7 @@
     v-if="isEditing"
     ref="itemInputRef"
     v-model="itemLabel"
-    class="fixed z-10000 px-2 py-2 text-[.8rem]"
+    class="fixed z-10000 p-2 text-[.8rem]"
     @blur="inputBlur(false)"
     @click.stop
     @keydown.enter="inputBlur(true)"
diff --git a/src/components/builder/AppBuilder.vue b/src/components/builder/AppBuilder.vue
index 59fc8def31..a9013da2a4 100644
--- a/src/components/builder/AppBuilder.vue
+++ b/src/components/builder/AppBuilder.vue
@@ -337,7 +337,7 @@ const renderedInputs = computed<[string, MaybeRef<BoundStyle> | undefined][]>(
     <div
       :class="
         cn(
-          'absolute w-full h-full pointer-events-auto',
+          'absolute size-full pointer-events-auto',
           hoveringSelectable ? 'cursor-pointer' : 'cursor-grab'
         )
       "
diff --git a/src/components/builder/BuilderDialog.vue b/src/components/builder/BuilderDialog.vue
index 3d93b76776..70586024ea 100644
--- a/src/components/builder/BuilderDialog.vue
+++ b/src/components/builder/BuilderDialog.vue
@@ -24,12 +24,12 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-1 flex-col gap-4 px-4 py-4">
+    <div class="flex flex-1 flex-col gap-4 p-4">
       <slot />
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <slot name="footer" />
     </div>
   </div>
diff --git a/src/components/builder/ConnectOutputPopover.vue b/src/components/builder/ConnectOutputPopover.vue
index 78d9bb7ef9..a3fdb591f7 100644
--- a/src/components/builder/ConnectOutputPopover.vue
+++ b/src/components/builder/ConnectOutputPopover.vue
@@ -7,7 +7,7 @@
       side="bottom"
       :side-offset="8"
       :collision-padding="10"
-      class="z-[1001] w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
+      class="z-1001 w-80 rounded-xl border border-border-default bg-base-background shadow-interface will-change-[transform,opacity] data-[state=open]:data-[side=bottom]:animate-slideUpAndFade"
     >
       <div class="flex h-12 items-center justify-between px-4">
         <h3 class="text-sm font-medium text-base-foreground">
@@ -21,12 +21,12 @@
         </PopoverClose>
       </div>
       <div class="border-t border-border-default" />
-      <p class="mt-3 px-4 text-xs text-muted-foreground leading-relaxed">
+      <p class="mt-3 px-4 text-xs/relaxed text-muted-foreground">
         {{ t('builderToolbar.connectOutputBody1') }}
       </p>
       <p
         v-if="!isSelectActive"
-        class="mt-2 px-4 text-xs text-muted-foreground leading-relaxed"
+        class="mt-2 px-4 text-xs/relaxed text-muted-foreground"
       >
         {{ t('builderToolbar.connectOutputBody2') }}
       </p>
diff --git a/src/components/card/CardTop.vue b/src/components/card/CardTop.vue
index fb3a528b6c..56b19b1bef 100644
--- a/src/components/card/CardTop.vue
+++ b/src/components/card/CardTop.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="topStyle">
-    <slot class="absolute top-0 left-0 h-full w-full"></slot>
+    <slot class="absolute top-0 left-0 size-full"></slot>
 
     <div v-if="slots['top-left']" :class="slotClasses['top-left']">
       <slot name="top-left"></slot>
diff --git a/src/components/common/DropdownItem.vue b/src/components/common/DropdownItem.vue
index 6e82bbad75..e6d55f7518 100644
--- a/src/components/common/DropdownItem.vue
+++ b/src/components/common/DropdownItem.vue
@@ -22,7 +22,7 @@ defineProps<{ itemClass: string; contentClass: string; item: MenuItem }>()
 <template>
   <DropdownMenuSeparator
     v-if="item.separator"
-    class="h-[1px] bg-border-subtle m-1"
+    class="h-px bg-border-subtle m-1"
   />
   <DropdownMenuSub v-else-if="item.items">
     <DropdownMenuSubTrigger
diff --git a/src/components/common/DropdownMenu.vue b/src/components/common/DropdownMenu.vue
index 6cec4542cc..5adf58a9f3 100644
--- a/src/components/common/DropdownMenu.vue
+++ b/src/components/common/DropdownMenu.vue
@@ -27,7 +27,7 @@ const { itemClass: itemProp, contentClass: contentProp } = defineProps<{
 
 const itemClass = computed(() =>
   cn(
-    'data-[highlighted]:bg-secondary-background-hover data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
+    'data-highlighted:bg-secondary-background-hover data-disabled:pointer-events-none data-disabled:text-muted-foreground flex p-2 leading-none rounded-lg gap-1 cursor-pointer m-1',
     itemProp
   )
 )
diff --git a/src/components/common/FormImageUpload.vue b/src/components/common/FormImageUpload.vue
index 39811e0540..479b84e627 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-sm border p-2"
+        class="preview-box flex size-16 items-center justify-center rounded-sm border p-2"
         :class="{ 'bg-base-background': !modelValue }"
       >
         <img
diff --git a/src/components/common/LazyImage.vue b/src/components/common/LazyImage.vue
index b29aebc15c..1b34db33ba 100644
--- a/src/components/common/LazyImage.vue
+++ b/src/components/common/LazyImage.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="relative flex h-full w-full items-center justify-center overflow-hidden"
+    class="relative flex size-full items-center justify-center overflow-hidden"
     :class="containerClass"
   >
     <Skeleton
diff --git a/src/components/common/MarqueeLine.vue b/src/components/common/MarqueeLine.vue
index 09894c195f..21b00f5e88 100644
--- a/src/components/common/MarqueeLine.vue
+++ b/src/components/common/MarqueeLine.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="overflow-hidden [container-type:inline-size] [mask-image:linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:[mask-image:none]"
+    class="overflow-hidden @container mask-[linear-gradient(to_right,black_70%,transparent)] motion-safe:group-hover:mask-none"
   >
     <span
-      class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:[animation:marquee-scroll_3s_linear_infinite_alternate]"
+      class="whitespace-nowrap inline-block min-w-full text-center [--_marquee-end:min(calc(-100%+100cqw),0px)] motion-safe:group-hover:animate-[marquee-scroll_3s_linear_infinite_alternate]"
     >
       <slot />
     </span>
diff --git a/src/components/common/TreeExplorerV2.vue b/src/components/common/TreeExplorerV2.vue
index 957da8d6d3..122d367996 100644
--- a/src/components/common/TreeExplorerV2.vue
+++ b/src/components/common/TreeExplorerV2.vue
@@ -39,7 +39,7 @@
 
     <ContextMenuPortal v-if="showContextMenu">
       <ContextMenuContent
-        class="z-[9999] min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
+        class="z-9999 min-w-32 overflow-hidden rounded-md border border-border-default bg-comfy-menu-bg p-1 shadow-md"
       >
         <ContextMenuItem
           class="flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-highlight focus:bg-highlight"
diff --git a/src/components/common/WorkflowActionsList.vue b/src/components/common/WorkflowActionsList.vue
index 670145f481..ca93793c22 100644
--- a/src/components/common/WorkflowActionsList.vue
+++ b/src/components/common/WorkflowActionsList.vue
@@ -32,9 +32,9 @@ const {
         cn(
           'flex min-h-6 p-2 items-center gap-2 self-stretch rounded-sm outline-none',
           !item.disabled && item.command && 'cursor-pointer',
-          'data-[highlighted]:bg-secondary-background-hover',
+          'data-highlighted:bg-secondary-background-hover',
           !item.disabled && 'hover:bg-secondary-background-hover',
-          'data-[disabled]:opacity-50 data-[disabled]:cursor-default'
+          'data-disabled:opacity-50 data-disabled:cursor-default'
         )
       "
       @select="() => item.command?.()"
@@ -44,7 +44,7 @@ const {
       <span class="flex-1">{{ item.label }}</span>
       <span
         v-if="item.badge"
-        class="rounded-full uppercase ml-3 flex items-center gap-1 bg-[var(--primary-background)] px-1.5 py-0.5 text-xxs text-base-foreground"
+        class="rounded-full uppercase ml-3 flex items-center gap-1 bg-(--primary-background) px-1.5 py-0.5 text-xxs text-base-foreground"
       >
         {{ item.badge }}
       </span>
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index e97fa66d1a..1d708df507 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -116,7 +116,7 @@
         v-if="!isLoading && filteredTemplates.length === 0"
         class="flex h-64 flex-col items-center justify-center text-neutral-500"
       >
-        <i class="mb-4 icon-[lucide--search] h-12 w-12 opacity-50" />
+        <i class="mb-4 icon-[lucide--search] size-12 opacity-50" />
         <p class="mb-2 text-lg">
           {{ $t('templateWorkflows.noResults', 'No templates found') }}
         </p>
@@ -154,9 +154,7 @@
             <template #top>
               <CardTop ratio="landscape">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="size-full animate-pulse bg-dialog-surface"></div>
                 </template>
               </CardTop>
             </template>
@@ -193,9 +191,7 @@
               <CardTop ratio="square">
                 <template #default>
                   <!-- Template Thumbnail -->
-                  <div
-                    class="relative h-full w-full overflow-hidden rounded-lg"
-                  >
+                  <div class="relative size-full overflow-hidden rounded-lg">
                     <template v-if="template.mediaType === 'audio'">
                       <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
                     </template>
@@ -263,7 +259,7 @@
                     />
                     <ProgressSpinner
                       v-if="loadingTemplate === template.name"
-                      class="absolute inset-0 z-10 m-auto h-12 w-12"
+                      class="absolute inset-0 z-10 m-auto size-12"
                     />
                   </div>
                 </template>
@@ -339,9 +335,7 @@
             <template #top>
               <CardTop ratio="square">
                 <template #default>
-                  <div
-                    class="h-full w-full animate-pulse bg-dialog-surface"
-                  ></div>
+                  <div class="size-full animate-pulse bg-dialog-surface"></div>
                 </template>
               </CardTop>
             </template>
diff --git a/src/components/dialog/confirm/ConfirmBody.vue b/src/components/dialog/confirm/ConfirmBody.vue
index 71fa4a993f..76b5b8e53b 100644
--- a/src/components/dialog/confirm/ConfirmBody.vue
+++ b/src/components/dialog/confirm/ConfirmBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col break-words px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
+    class="flex flex-col wrap-break-word px-4 py-2 text-sm text-muted-foreground border-t border-border-default"
   >
     <p v-if="promptTextReal">
       {{ promptTextReal }}
diff --git a/src/components/dialog/content/ConfirmationDialogContent.vue b/src/components/dialog/content/ConfirmationDialogContent.vue
index d719f02852..c7e0209ae7 100644
--- a/src/components/dialog/content/ConfirmationDialogContent.vue
+++ b/src/components/dialog/content/ConfirmationDialogContent.vue
@@ -1,5 +1,7 @@
 <template>
-  <section class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap break-words">
+  <section
+    class="m-2 mt-4 flex flex-col gap-6 whitespace-pre-wrap wrap-break-word"
+  >
     <div>
       <span>{{ message }}</span>
       <ul v-if="itemList?.length" class="m-0 mt-2 flex flex-col gap-2 pl-4">
@@ -28,7 +30,7 @@
             id="doNotAskAgain"
             v-model="doNotAskAgain"
             type="checkbox"
-            class="h-4 w-4 cursor-pointer"
+            class="size-4 cursor-pointer"
           />
           <label for="doNotAskAgain">{{
             t('missingModelsDialog.doNotAskAgain')
diff --git a/src/components/dialog/content/ErrorDialogContent.vue b/src/components/dialog/content/ErrorDialogContent.vue
index caac4274ca..3c03a4a26e 100644
--- a/src/components/dialog/content/ErrorDialogContent.vue
+++ b/src/components/dialog/content/ErrorDialogContent.vue
@@ -28,7 +28,9 @@
     <template v-if="reportOpen">
       <Divider />
       <ScrollPanel class="h-[400px] w-full max-w-[80vw]">
-        <pre class="break-words whitespace-pre-wrap">{{ reportContent }}</pre>
+        <pre class="wrap-break-word whitespace-pre-wrap">{{
+          reportContent
+        }}</pre>
       </ScrollPanel>
       <Divider />
     </template>
diff --git a/src/components/dialog/content/MissingCoreNodesMessage.vue b/src/components/dialog/content/MissingCoreNodesMessage.vue
index 0274191af2..14f2d76786 100644
--- a/src/components/dialog/content/MissingCoreNodesMessage.vue
+++ b/src/components/dialog/content/MissingCoreNodesMessage.vue
@@ -3,7 +3,7 @@
     v-if="hasMissingCoreNodes"
     severity="info"
     icon="pi pi-info-circle"
-    class="mx-2 my-2"
+    class="m-2"
     :pt="{
       root: { class: 'flex-col' },
       text: { class: 'flex-1' }
diff --git a/src/components/dialog/content/MissingModelsContent.vue b/src/components/dialog/content/MissingModelsContent.vue
index 02ac86e9c6..2559c4cc11 100644
--- a/src/components/dialog/content/MissingModelsContent.vue
+++ b/src/components/dialog/content/MissingModelsContent.vue
@@ -2,8 +2,8 @@
   <div
     class="flex w-full max-w-[490px] flex-col border-t border-border-default"
   >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
-      <p class="m-0 text-sm leading-5 text-muted-foreground">
+    <div class="flex size-full flex-col gap-4 p-4">
+      <p class="m-0 text-sm/5 text-muted-foreground">
         {{ $t('missingModelsDialog.description') }}
       </p>
 
@@ -81,9 +81,7 @@
         </div>
       </div>
 
-      <p
-        class="m-0 text-xs leading-5 text-muted-foreground whitespace-pre-line"
-      >
+      <p class="m-0 text-xs/5 text-muted-foreground whitespace-pre-line">
         {{ $t('missingModelsDialog.footerDescription') }}
       </p>
 
@@ -92,15 +90,13 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+          class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
         />
         <div class="flex flex-col gap-1">
-          <p
-            class="m-0 text-xs font-semibold leading-5 text-warning-background"
-          >
+          <p class="m-0 text-xs/5 font-semibold text-warning-background">
             {{ $t('missingModelsDialog.customModelsWarning') }}
           </p>
-          <p class="m-0 text-xs leading-5 text-warning-background">
+          <p class="m-0 text-xs/5 text-warning-background">
             {{ $t('missingModelsDialog.customModelsInstruction') }}
           </p>
         </div>
diff --git a/src/components/dialog/content/MissingModelsFooter.vue b/src/components/dialog/content/MissingModelsFooter.vue
index dc6c734d9d..8481e71f6f 100644
--- a/src/components/dialog/content/MissingModelsFooter.vue
+++ b/src/components/dialog/content/MissingModelsFooter.vue
@@ -6,7 +6,7 @@
           id="doNotAskAgainModels"
           v-model="doNotAskAgain"
           type="checkbox"
-          class="h-4 w-4 cursor-pointer"
+          class="size-4 cursor-pointer"
         />
         <label for="doNotAskAgainModels">{{
           $t('missingModelsDialog.doNotAskAgain')
diff --git a/src/components/dialog/content/MissingNodesContent.vue b/src/components/dialog/content/MissingNodesContent.vue
index 1c8171c520..1e93bb59d7 100644
--- a/src/components/dialog/content/MissingNodesContent.vue
+++ b/src/components/dialog/content/MissingNodesContent.vue
@@ -4,10 +4,10 @@
     class="comfy-missing-nodes flex w-[490px] flex-col border-t border-border-default"
     :class="isCloud ? 'border-b' : ''"
   >
-    <div class="flex h-full w-full flex-col gap-4 p-4">
+    <div class="flex size-full flex-col gap-4 p-4">
       <!-- Description -->
       <div>
-        <p class="m-0 text-sm leading-5 text-muted-foreground">
+        <p class="m-0 text-sm/5 text-muted-foreground">
           {{
             isCloud
               ? $t('missingNodes.cloud.description')
@@ -26,7 +26,7 @@
             <span class="text-xs font-semibold uppercase text-primary">
               {{ $t('nodeReplacement.quickFixAvailable') }}
             </span>
-            <div class="h-2 w-2 rounded-full bg-primary" />
+            <div class="size-2 rounded-full bg-primary" />
           </div>
           <Button
             v-tooltip.top="$t('nodeReplacement.replaceWarning')"
@@ -35,7 +35,7 @@
             :disabled="selectedTypes.size === 0"
             @click="handleReplaceSelected"
           >
-            <i class="icon-[lucide--refresh-cw] mr-1.5 h-4 w-4" />
+            <i class="icon-[lucide--refresh-cw] mr-1.5 size-4" />
             {{
               $t('nodeReplacement.replaceSelected', {
                 count: selectedTypes.size
@@ -209,9 +209,9 @@
         class="flex gap-3 rounded-lg border border-warning-background bg-warning-background/10 p-3"
       >
         <i
-          class="icon-[lucide--triangle-alert] mt-0.5 h-4 w-4 shrink-0 text-warning-background"
+          class="icon-[lucide--triangle-alert] mt-0.5 size-4 shrink-0 text-warning-background"
         />
-        <p class="m-0 text-xs leading-5 text-neutral-foreground">
+        <p class="m-0 text-xs/5 text-neutral-foreground">
           <i18n-t keypath="nodeReplacement.instructionMessage">
             <template #red>
               <span class="text-error">{{
diff --git a/src/components/dialog/content/MissingNodesFooter.vue b/src/components/dialog/content/MissingNodesFooter.vue
index 65fd75807a..f070d9c32d 100644
--- a/src/components/dialog/content/MissingNodesFooter.vue
+++ b/src/components/dialog/content/MissingNodesFooter.vue
@@ -6,7 +6,7 @@
           id="doNotAskAgainNodes"
           v-model="doNotAskAgain"
           type="checkbox"
-          class="h-4 w-4 cursor-pointer"
+          class="size-4 cursor-pointer"
         />
         <label for="doNotAskAgainNodes">{{
           $t('missingModelsDialog.doNotAskAgain')
diff --git a/src/components/dialog/content/SignInContent.vue b/src/components/dialog/content/SignInContent.vue
index bc4f8e7e00..14258b8f0c 100644
--- a/src/components/dialog/content/SignInContent.vue
+++ b/src/components/dialog/content/SignInContent.vue
@@ -8,7 +8,7 @@
     <template v-else>
       <!-- Header -->
       <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-2xl leading-normal font-medium">
+        <h1 class="my-0 text-2xl/normal font-medium">
           {{ isSignIn ? t('auth.login.title') : t('auth.signup.title') }}
         </h1>
         <p class="my-0 text-base">
@@ -85,7 +85,7 @@
         >
           <img
             src="/assets/images/comfy-logo-mono.svg"
-            class="mr-2 h-5 w-5"
+            class="mr-2 size-5"
             :alt="$t('g.comfy')"
           />
           {{ t('auth.login.useApiKey') }}
diff --git a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
index dd94bd9a87..158d6938fc 100644
--- a/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
+++ b/src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
@@ -3,7 +3,7 @@
     class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- Header -->
-    <div class="flex py-8 items-center justify-between px-8">
+    <div class="flex p-8 items-center justify-between">
       <h2 class="text-lg font-bold text-base-foreground m-0">
         {{
           isInsufficientCredits
@@ -123,7 +123,7 @@
       >
     </p>
 
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+    <div class="p-8 flex flex-col gap-8">
       <Button
         :disabled="!isValidAmount || loading"
         :loading="loading"
diff --git a/src/components/dialog/content/setting/UserPanel.vue b/src/components/dialog/content/setting/UserPanel.vue
index e289f16856..534da27cff 100644
--- a/src/components/dialog/content/setting/UserPanel.vue
+++ b/src/components/dialog/content/setting/UserPanel.vue
@@ -55,7 +55,7 @@
 
         <ProgressSpinner
           v-if="loading"
-          class="mt-4 h-8 w-8"
+          class="mt-4 size-8"
           style="--pc-spinner-color: #000"
         />
         <div v-else class="mt-4 flex flex-col gap-2">
diff --git a/src/components/dialog/content/signin/ApiKeyForm.vue b/src/components/dialog/content/signin/ApiKeyForm.vue
index 22ecb3205a..a2ea85dbf7 100644
--- a/src/components/dialog/content/signin/ApiKeyForm.vue
+++ b/src/components/dialog/content/signin/ApiKeyForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col gap-6">
     <div class="mb-8 flex flex-col gap-4">
-      <h1 class="my-0 text-2xl leading-normal font-medium">
+      <h1 class="my-0 text-2xl/normal font-medium">
         {{ t('auth.apiKey.title') }}
       </h1>
       <div class="flex flex-col gap-2">
diff --git a/src/components/dialog/content/signin/SignInForm.vue b/src/components/dialog/content/signin/SignInForm.vue
index 40e576c53d..3e8fbc70de 100644
--- a/src/components/dialog/content/signin/SignInForm.vue
+++ b/src/components/dialog/content/signin/SignInForm.vue
@@ -63,7 +63,7 @@
     </div>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="mx-auto size-8" />
     <Button
       v-else
       type="submit"
diff --git a/src/components/dialog/content/signin/SignUpForm.vue b/src/components/dialog/content/signin/SignUpForm.vue
index 58b44578f7..9d642a0371 100644
--- a/src/components/dialog/content/signin/SignUpForm.vue
+++ b/src/components/dialog/content/signin/SignUpForm.vue
@@ -29,7 +29,7 @@
     <PasswordFields />
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="mx-auto h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="mx-auto size-8" />
     <Button
       v-else
       type="submit"
diff --git a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
index e2054dab15..1ef9090686 100644
--- a/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
+++ b/src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
@@ -20,14 +20,14 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-col gap-4 p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ description }}
       </p>
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" :disabled="isLoading" @click="onClose">
         {{ $t('subscription.cancelDialog.keepSubscription') }}
       </Button>
diff --git a/src/components/error/ErrorOverlay.vue b/src/components/error/ErrorOverlay.vue
index 22eb101f64..65935b834d 100644
--- a/src/components/error/ErrorOverlay.vue
+++ b/src/components/error/ErrorOverlay.vue
@@ -32,12 +32,12 @@
             <li
               v-for="(message, idx) in groupedErrorMessages"
               :key="idx"
-              class="flex items-baseline gap-2 text-sm leading-snug text-muted-foreground min-w-0"
+              class="flex items-baseline gap-2 text-sm/snug text-muted-foreground min-w-0"
             >
               <span
                 class="mt-1.5 size-1 shrink-0 rounded-full bg-muted-foreground"
               />
-              <span class="break-words line-clamp-3 whitespace-pre-wrap">{{
+              <span class="wrap-break-word line-clamp-3 whitespace-pre-wrap">{{
                 message
               }}</span>
             </li>
diff --git a/src/components/gradientslider/GradientSlider.vue b/src/components/gradientslider/GradientSlider.vue
index 8b65e77baf..76ea0f29a3 100644
--- a/src/components/gradientslider/GradientSlider.vue
+++ b/src/components/gradientslider/GradientSlider.vue
@@ -54,7 +54,7 @@ const pressed = ref(false)
     :class="
       cn(
         'relative flex w-full touch-none items-center select-none',
-        'data-[disabled]:opacity-50'
+        'data-disabled:opacity-50'
       )
     "
     :style="{ '--reka-slider-thumb-transform': 'translate(-50%, -50%)' }"
diff --git a/src/components/graph/CanvasModeSelector.vue b/src/components/graph/CanvasModeSelector.vue
index e78d6d5000..c339d5f989 100644
--- a/src/components/graph/CanvasModeSelector.vue
+++ b/src/components/graph/CanvasModeSelector.vue
@@ -10,9 +10,9 @@
       <div
         class="rounded-lg bg-interface-panel-selected-surface p-2 group-hover:bg-interface-button-hover-surface"
       >
-        <i :class="currentModeIcon" class="block h-4 w-4" />
+        <i :class="currentModeIcon" class="block size-4" />
       </div>
-      <i class="icon-[lucide--chevron-down] block h-4 w-4 pr-1.5" />
+      <i class="icon-[lucide--chevron-down] block size-4 pr-1.5" />
     </div>
   </Button>
 
@@ -31,7 +31,7 @@
         @click="setMode('select')"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--mouse-pointer-2] h-4 w-4" />
+          <i class="icon-[lucide--mouse-pointer-2] size-4" />
           <span>{{ $t('graphCanvasMenu.select') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{
@@ -44,7 +44,7 @@
         @click="setMode('hand')"
       >
         <div class="flex items-center gap-2">
-          <i class="icon-[lucide--hand] h-4 w-4" />
+          <i class="icon-[lucide--hand] size-4" />
           <span>{{ $t('graphCanvasMenu.hand') }}</span>
         </div>
         <span class="text-[9px] text-text-primary">{{ lockCommandText }}</span>
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 020ac496ca..ab8603138f 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -11,7 +11,7 @@
         <!-- Native drag area for Electron -->
         <div
           v-if="isNativeWindow() && workflowTabsPosition !== 'Topbar'"
-          class="app-drag fixed top-0 left-0 z-10 h-[var(--comfy-topbar-height)] w-full"
+          class="app-drag fixed top-0 left-0 z-10 h-(--comfy-topbar-height) w-full"
         />
         <div
           class="flex h-full items-center border-b border-interface-stroke bg-comfy-menu-bg shadow-interface"
@@ -27,7 +27,7 @@
     </template>
     <template v-if="showUI" #side-bar-panel>
       <div
-        class="sidebar-content-container h-full w-full overflow-x-hidden overflow-y-auto"
+        class="sidebar-content-container size-full overflow-x-hidden overflow-y-auto"
       >
         <ExtensionSlot v-if="activeSidebarTab" :extension="activeSidebarTab" />
       </div>
diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index 0b5746d89f..2a31325ab1 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
+      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
       }"
@@ -20,17 +20,17 @@
         :button-styles="stringifiedMinimapStyles.buttonStyles"
       />
 
-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="h-[27px] w-px self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="fitViewTooltip"
         variant="secondary"
         :aria-label="fitViewTooltip"
         :style="stringifiedMinimapStyles.buttonStyles"
-        class="h-8 w-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
+        class="size-8 bg-comfy-menu-bg p-0 hover:bg-interface-button-hover-surface!"
         @click="() => commandStore.execute('Comfy.Canvas.FitView')"
       >
-        <i class="icon-[lucide--focus] h-4 w-4" />
+        <i class="icon-[lucide--focus] size-4" />
       </Button>
 
       <Button
@@ -44,11 +44,11 @@
       >
         <span class="inline-flex items-center gap-1 px-2 text-xs">
           <span>{{ canvasStore.appScalePercentage }}%</span>
-          <i class="icon-[lucide--chevron-down] h-4 w-4" />
+          <i class="icon-[lucide--chevron-down] size-4" />
         </span>
       </Button>
 
-      <div class="h-[27px] w-[1px] self-center bg-node-divider" />
+      <div class="h-[27px] w-px self-center bg-node-divider" />
 
       <Button
         v-tooltip.top="minimapTooltip"
@@ -59,7 +59,7 @@
         :class="minimapButtonClass"
         @click="onMinimapToggleClick"
       >
-        <i class="icon-[lucide--map] h-4 w-4" />
+        <i class="icon-[lucide--map] size-4" />
       </Button>
 
       <Button
@@ -78,7 +78,7 @@
         :style="stringifiedMinimapStyles.buttonStyles"
         @click="onLinkVisibilityToggleClick"
       >
-        <i class="icon-[lucide--route-off] h-4 w-4" />
+        <i class="icon-[lucide--route-off] size-4" />
       </Button>
     </ButtonGroup>
   </div>
diff --git a/src/components/graph/selectionToolbox/ColorPickerMenu.vue b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
index 5ce69a5898..6b59caa4f0 100644
--- a/src/components/graph/selectionToolbox/ColorPickerMenu.vue
+++ b/src/components/graph/selectionToolbox/ColorPickerMenu.vue
@@ -33,7 +33,7 @@
           cn(
             'hover:bg-secondary-background-hover rounded-sm cursor-pointer',
             isColorSubmenu
-              ? 'w-7 h-7 flex items-center justify-center'
+              ? 'size-7 flex items-center justify-center'
               : 'flex items-center gap-2 px-3 py-1.5 text-sm',
             subOption.disabled
               ? 'cursor-not-allowed pointer-events-none text-node-icon-disabled'
diff --git a/src/components/graph/widgets/DomWidget.vue b/src/components/graph/widgets/DomWidget.vue
index f90a43c7c2..24fce2755a 100644
--- a/src/components/graph/widgets/DomWidget.vue
+++ b/src/components/graph/widgets/DomWidget.vue
@@ -2,14 +2,14 @@
   <div
     v-show="widgetState.visible"
     ref="widgetElement"
-    class="dom-widget h-full w-full"
+    class="dom-widget size-full"
     :title="tooltip"
     :style="style"
   >
     <component
       :is="widget.component"
       v-if="isComponentWidget(widget)"
-      class="h-full w-full"
+      class="size-full"
       :model-value="widget.value"
       :widget="widget"
       v-bind="widget.props"
diff --git a/src/components/helpcenter/HelpCenterMenuContent.vue b/src/components/helpcenter/HelpCenterMenuContent.vue
index 7eb5687437..da621696e1 100644
--- a/src/components/helpcenter/HelpCenterMenuContent.vue
+++ b/src/components/helpcenter/HelpCenterMenuContent.vue
@@ -33,7 +33,7 @@
           <span class="menu-label">{{ menuItem.label }}</span>
           <i
             v-if="menuItem.showExternalIcon"
-            class="icon-[lucide--external-link] text-primary w-4 h-4 ml-auto"
+            class="icon-[lucide--external-link] text-primary size-4 ml-auto"
           />
           <i
             v-if="menuItem.key === 'more'"
@@ -88,7 +88,7 @@
       data-testid="whats-new-section"
     >
       <h3
-        class="section-description flex items-center gap-2.5 self-stretch px-8 pt-2 pb-2"
+        class="section-description flex items-center gap-2.5 self-stretch px-8 py-2"
       >
         {{ $t('helpCenter.whatsNew') }}
       </h3>
diff --git a/src/components/imagecrop/WidgetImageCrop.vue b/src/components/imagecrop/WidgetImageCrop.vue
index 86e799a959..5d55ddb8b9 100644
--- a/src/components/imagecrop/WidgetImageCrop.vue
+++ b/src/components/imagecrop/WidgetImageCrop.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="widget-expands relative flex h-full w-full flex-col gap-1"
+    class="widget-expands relative flex size-full flex-col gap-1"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
@@ -18,7 +18,7 @@
         v-else-if="!imageUrl"
         class="flex size-full flex-col items-center justify-center text-center"
       >
-        <i class="mb-2 icon-[lucide--image] h-12 w-12" />
+        <i class="mb-2 icon-[lucide--image] size-12" />
         <p class="text-sm">{{ $t('imageCrop.noInputImage') }}</p>
       </div>
 
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index 388f3aedd2..1274eab042 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -46,7 +46,7 @@
       // Overlay & list visuals unchanged
       overlay: {
         class: cn(
-          'mt-2 rounded-lg py-2 px-2',
+          'mt-2 rounded-lg p-2',
           'bg-base-background',
           'text-base-foreground',
           'border border-solid border-border-default'
@@ -135,7 +135,7 @@
       </span>
       <span
         v-if="selectedCount > 0"
-        class="pointer-events-none absolute -top-2 -right-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
+        class="pointer-events-none absolute -top-2 -right-2 z-10 flex size-5 items-center justify-center rounded-full bg-primary-background text-xs font-semibold text-base-foreground"
       >
         {{ selectedCount }}
       </span>
diff --git a/src/components/load3d/Load3DScene.vue b/src/components/load3d/Load3DScene.vue
index 7f9e4a8d4b..c1334142b0 100644
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="relative h-full w-full min-h-[200px]"
+    class="relative size-full min-h-[200px]"
     data-capture-wheel="true"
     tabindex="-1"
     @pointerdown.stop="focusContainer"
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index 71d6d1eead..f7476fde03 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -9,7 +9,7 @@
     <div class="relative flex-1">
       <div
         ref="containerRef"
-        class="absolute h-full w-full"
+        class="absolute size-full"
         @resize="viewer.handleResize"
         @dragover.prevent.stop="handleDragOver"
         @dragleave.stop="handleDragLeave"
diff --git a/src/components/load3d/controls/SceneControls.vue b/src/components/load3d/controls/SceneControls.vue
index 9eea9fc27d..911bea78a0 100644
--- a/src/components/load3d/controls/SceneControls.vue
+++ b/src/components/load3d/controls/SceneControls.vue
@@ -28,7 +28,7 @@
           ref="colorPickerRef"
           type="color"
           :value="backgroundColor"
-          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
+          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
           @input="
             updateBackgroundColor(($event.target as HTMLInputElement).value)
           "
@@ -53,7 +53,7 @@
           ref="imagePickerRef"
           type="file"
           accept="image/*"
-          class="pointer-events-none absolute m-0 h-0 w-0 p-0 opacity-0"
+          class="pointer-events-none absolute m-0 size-0 p-0 opacity-0"
           @change="uploadBackgroundImage"
         />
       </Button>
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index 361f3b1565..c422858716 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -22,7 +22,7 @@
           :class="
             cn(
               store.brushSettings.type === BrushShape.Arc
-                ? 'bg-[var(--p-button-text-primary-color)] active'
+                ? 'bg-(--p-button-text-primary-color) active'
                 : 'bg-transparent'
             )
           "
@@ -34,7 +34,7 @@
           :class="
             cn(
               store.brushSettings.type === BrushShape.Rect
-                ? 'bg-[var(--p-button-text-primary-color)] active'
+                ? 'bg-(--p-button-text-primary-color) active'
                 : 'bg-transparent'
             )
           "
diff --git a/src/components/maskeditor/ColorSelectSettingsPanel.vue b/src/components/maskeditor/ColorSelectSettingsPanel.vue
index 7d40361a8f..4cf0a65d54 100644
--- a/src/components/maskeditor/ColorSelectSettingsPanel.vue
+++ b/src/components/maskeditor/ColorSelectSettingsPanel.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
+    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
       {{ t('maskEditor.colorSelectSettings') }}
     </h3>
 
diff --git a/src/components/maskeditor/ImageLayerSettingsPanel.vue b/src/components/maskeditor/ImageLayerSettingsPanel.vue
index b0878be65f..1b95424ac1 100644
--- a/src/components/maskeditor/ImageLayerSettingsPanel.vue
+++ b/src/components/maskeditor/ImageLayerSettingsPanel.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
+    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
       {{ t('maskEditor.layers') }}
     </h3>
 
@@ -15,7 +13,7 @@
       @update:model-value="onMaskOpacityChange"
     />
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       t('maskEditor.maskBlendingOptions')
     }}</span>
 
@@ -33,7 +31,7 @@
       </select>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       t('maskEditor.maskLayer')
     }}</span>
     <div
@@ -66,7 +64,7 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       t('maskEditor.paintLayer')
     }}</span>
     <div
@@ -106,7 +104,7 @@
       </button>
     </div>
 
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       t('maskEditor.baseImageLayer')
     }}</span>
     <div
diff --git a/src/components/maskeditor/MaskEditorContent.vue b/src/components/maskeditor/MaskEditorContent.vue
index 0563dc571a..5bc3c1cfaa 100644
--- a/src/components/maskeditor/MaskEditorContent.vue
+++ b/src/components/maskeditor/MaskEditorContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="containerRef"
-    class="maskEditor-dialog-root flex h-full w-full flex-col"
+    class="maskEditor-dialog-root flex size-full flex-col"
     @contextmenu.prevent
     @dragstart="handleDragStart"
     @keydown.stop
@@ -13,29 +13,29 @@
     >
       <canvas
         ref="imgCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-0"
+        class="absolute top-0 left-0 size-full z-0"
         @contextmenu.prevent
       />
       <canvas
         ref="rgbCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-10"
+        class="absolute top-0 left-0 size-full z-10"
         @contextmenu.prevent
       />
       <canvas
         ref="maskCanvasRef"
-        class="absolute top-0 left-0 w-full h-full z-30"
+        class="absolute top-0 left-0 size-full z-30"
         @contextmenu.prevent
       />
       <!-- GPU Preview Canvas -->
       <canvas
         ref="gpuCanvasRef"
-        class="absolute top-0 left-0 w-full h-full pointer-events-none"
+        class="absolute top-0 left-0 size-full pointer-events-none"
         :class="{
           'z-20': store.activeLayer === 'rgb',
           'z-40': store.activeLayer === 'mask'
         }"
       />
-      <div ref="canvasBackgroundRef" class="bg-white w-full h-full" />
+      <div ref="canvasBackgroundRef" class="bg-white size-full" />
     </div>
 
     <div class="maskEditor-ui-container flex min-h-0 flex-1 flex-col">
diff --git a/src/components/maskeditor/PaintBucketSettingsPanel.vue b/src/components/maskeditor/PaintBucketSettingsPanel.vue
index bbe4e68418..130db67bd4 100644
--- a/src/components/maskeditor/PaintBucketSettingsPanel.vue
+++ b/src/components/maskeditor/PaintBucketSettingsPanel.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <h3
-      class="text-center text-[15px] font-sans text-[var(--descrip-text)] mt-2.5"
-    >
+    <h3 class="text-center text-[15px] font-sans text-(--descrip-text) mt-2.5">
       {{ t('maskEditor.paintBucketSettings') }}
     </h3>
 
diff --git a/src/components/maskeditor/SidePanel.vue b/src/components/maskeditor/SidePanel.vue
index 7d1fea82db..fb3c0905ee 100644
--- a/src/components/maskeditor/SidePanel.vue
+++ b/src/components/maskeditor/SidePanel.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="flex flex-col gap-3 pb-3 h-full !items-stretch bg-[var(--comfy-menu-bg)] overflow-y-auto w-55 px-2.5"
+    class="flex flex-col gap-3 pb-3 h-full items-stretch! bg-(--comfy-menu-bg) overflow-y-auto w-55 px-2.5"
   >
     <div class="w-full min-h-full">
       <SettingsPanelContainer />
 
-      <div class="w-full h-0.5 bg-[var(--border-color)] mt-6 mb-1.5" />
+      <div class="w-full h-0.5 bg-(--border-color) mt-6 mb-1.5" />
 
       <ImageLayerSettingsPanel :tool-manager="toolManager" />
     </div>
diff --git a/src/components/maskeditor/controls/DropdownControl.vue b/src/components/maskeditor/controls/DropdownControl.vue
index ec16ac92b2..b4c8e66f02 100644
--- a/src/components/maskeditor/controls/DropdownControl.vue
+++ b/src/components/maskeditor/controls/DropdownControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       label
     }}</span>
     <select
diff --git a/src/components/maskeditor/controls/SliderControl.vue b/src/components/maskeditor/controls/SliderControl.vue
index 443dfa0cea..34570721bf 100644
--- a/src/components/maskeditor/controls/SliderControl.vue
+++ b/src/components/maskeditor/controls/SliderControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-3 pb-3">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       label
     }}</span>
     <input
diff --git a/src/components/maskeditor/controls/ToggleControl.vue b/src/components/maskeditor/controls/ToggleControl.vue
index dd1a98c967..f7de8eabd1 100644
--- a/src/components/maskeditor/controls/ToggleControl.vue
+++ b/src/components/maskeditor/controls/ToggleControl.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-row gap-2.5 items-center min-h-6 relative">
-    <span class="text-left text-xs font-sans text-[var(--descrip-text)]">{{
+    <span class="text-left text-xs font-sans text-(--descrip-text)">{{
       label
     }}</span>
     <label class="maskEditor_sidePanelToggleContainer">
diff --git a/src/components/maskeditor/dialog/TopBarHeader.vue b/src/components/maskeditor/dialog/TopBarHeader.vue
index c1de81f8b7..f2f3629c4f 100644
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -26,7 +26,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
           >
             <path
               class="cls-1"
@@ -44,7 +44,7 @@
         >
           <svg
             viewBox="-6 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
           >
             <path
               d="m2.25-2.625c.3452 0 .625.2798.625.625v5c0 .3452-.2798.625-.625.625h-5c-.3452 0-.625-.2798-.625-.625v-5c0-.3452.2798-.625.625-.625h5zm1.25.625v5c0 .6904-.5596 1.25-1.25 1.25h-5c-.6904 0-1.25-.5596-1.25-1.25v-5c0-.6904.5596-1.25 1.25-1.25h5c.6904 0 1.25.5596 1.25 1.25zm-.1673-2.3757-.4419.4419-1.5246-1.5246 1.5416-1.5417.442.4419-.7871.7872h.9373c1.3807 0 2.5 1.1193 2.5 2.5h-.625c0-1.0355-.8395-1.875-1.875-1.875h-.9375l.7702.7702z"
@@ -59,7 +59,7 @@
         >
           <svg
             viewBox="-9 -7 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
           >
             <g transform="scale(-1, 1)">
               <path
@@ -76,7 +76,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
           >
             <path
               d="M7.5,1.5c-.28,0-.5.22-.5.5v11c0,.28.22.5.5.5s.5-.22.5-.5v-11c0-.28-.22-.5-.5-.5Z"
@@ -92,7 +92,7 @@
         >
           <svg
             viewBox="0 0 15 15"
-            class="h-6.25 w-6.25 pointer-events-none fill-[var(--input-text)]"
+            class="h-6.25 w-6.25 pointer-events-none fill-(--input-text)"
           >
             <path
               d="M2,7.5c0-.28.22-.5.5-.5h11c.28,0,.5.22.5.5s-.22.5-.5.5h-11c-.28,0-.5-.22-.5-.5Z"
@@ -101,7 +101,7 @@
           </svg>
         </button>
 
-        <div class="h-5 w-px bg-[var(--p-form-field-border-color)]" />
+        <div class="h-5 w-px bg-(--p-form-field-border-color)" />
 
         <button :class="textButtonClass" @click="onInvert">
           {{ t('maskEditor.invert') }}
diff --git a/src/components/painter/WidgetPainter.vue b/src/components/painter/WidgetPainter.vue
index 993787b393..dfec444a11 100644
--- a/src/components/painter/WidgetPainter.vue
+++ b/src/components/painter/WidgetPainter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="widget-expands flex h-full w-full flex-col gap-1"
+    class="widget-expands flex size-full flex-col gap-1"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
@@ -46,7 +46,7 @@
       ref="controlsEl"
       :class="
         cn(
-          'grid shrink-0 gap-x-1 gap-y-1',
+          'grid shrink-0 gap-1',
           compact ? 'grid-cols-1' : 'grid-cols-[auto_1fr]'
         )
       "
diff --git a/src/components/queue/JobHistoryActionsMenu.vue b/src/components/queue/JobHistoryActionsMenu.vue
index 83e88adf02..bce91b577b 100644
--- a/src/components/queue/JobHistoryActionsMenu.vue
+++ b/src/components/queue/JobHistoryActionsMenu.vue
@@ -14,7 +14,7 @@
         </Button>
       </template>
       <template #default="{ close }">
-        <div class="flex min-w-[14rem] flex-col items-stretch font-inter">
+        <div class="flex min-w-56 flex-col items-stretch font-inter">
           <Button
             data-testid="docked-job-history-action"
             class="w-full justify-between text-sm font-light"
@@ -67,7 +67,7 @@
                 class="icon-[lucide--trash-2] size-4 shrink-0 self-center text-destructive-background"
               />
               <span
-                class="flex flex-col items-start break-words text-left leading-tight"
+                class="flex flex-col items-start wrap-break-word text-left leading-tight"
               >
                 <span class="text-sm font-light">
                   {{ t('sideToolbar.queueProgressOverlay.clearHistory') }}
diff --git a/src/components/queue/QueueOverlayActive.vue b/src/components/queue/QueueOverlayActive.vue
index 69805deca7..9cd6b3c7bf 100644
--- a/src/components/queue/QueueOverlayActive.vue
+++ b/src/components/queue/QueueOverlayActive.vue
@@ -23,7 +23,7 @@
         </div>
         <div class="flex items-center gap-1 text-text-secondary">
           <span>{{ t('sideToolbar.queueProgressOverlay.currentNode') }}</span>
-          <span class="inline-block max-w-[10rem] truncate">{{
+          <span class="inline-block max-w-40 truncate">{{
             currentNodeName
           }}</span>
           <span class="flex items-center gap-1">
diff --git a/src/components/queue/dialogs/QueueClearHistoryDialog.vue b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
index 0884dcf6fc..49882fd8f2 100644
--- a/src/components/queue/dialogs/QueueClearHistoryDialog.vue
+++ b/src/components/queue/dialogs/QueueClearHistoryDialog.vue
@@ -3,7 +3,7 @@
     class="w-[360px] rounded-2xl border border-interface-stroke bg-interface-panel-surface text-text-primary shadow-interface font-inter"
   >
     <header
-      class="flex items-center justify-between border-b border-interface-stroke px-4 py-4"
+      class="flex items-center justify-between border-b border-interface-stroke p-4"
     >
       <p class="m-0 text-[14px] font-normal leading-none">
         {{ t('sideToolbar.queueProgressOverlay.clearHistoryDialogTitle') }}
@@ -18,7 +18,7 @@
       </Button>
     </header>
 
-    <div class="flex flex-col gap-4 px-4 py-4 text-[14px] text-text-secondary">
+    <div class="flex flex-col gap-4 p-4 text-[14px] text-text-secondary">
       <p class="m-0">
         {{
           t('sideToolbar.queueProgressOverlay.clearHistoryDialogDescription')
@@ -29,7 +29,7 @@
       </p>
     </div>
 
-    <footer class="flex items-center justify-end px-4 py-4">
+    <footer class="flex items-center justify-end p-4">
       <div class="flex items-center gap-4 leading-none">
         <Button variant="muted-textonly" size="lg" @click="onCancel">
           {{ t('g.cancel') }}
diff --git a/src/components/queue/job/JobContextMenu.vue b/src/components/queue/job/JobContextMenu.vue
index c8c4e1bddf..dc43c5ceb6 100644
--- a/src/components/queue/job/JobContextMenu.vue
+++ b/src/components/queue/job/JobContextMenu.vue
@@ -14,7 +14,7 @@
     }"
   >
     <div
-      class="flex min-w-[14rem] flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
+      class="flex min-w-56 flex-col items-stretch rounded-lg border border-interface-stroke bg-interface-panel-surface px-2 py-3 font-inter"
     >
       <template v-for="entry in entries" :key="entry.key">
         <div v-if="entry.kind === 'divider'" class="px-2 py-1">
diff --git a/src/components/queue/job/JobDetailsPopover.vue b/src/components/queue/job/JobDetailsPopover.vue
index 1bd02513df..55a391c096 100644
--- a/src/components/queue/job/JobDetailsPopover.vue
+++ b/src/components/queue/job/JobDetailsPopover.vue
@@ -3,21 +3,20 @@
     class="w-[300px] min-w-[260px] rounded-lg border border-interface-stroke bg-interface-panel-surface shadow-md"
   >
     <div class="flex items-center border-b border-interface-stroke p-4">
-      <span
-        class="text-[0.875rem] leading-normal font-normal text-text-primary"
-        >{{ t('queue.jobDetails.header') }}</span
-      >
+      <span class="text-sm/normal font-normal text-text-primary">{{
+        t('queue.jobDetails.header')
+      }}</span>
     </div>
-    <div class="flex flex-col gap-6 px-4 pt-4 pb-4">
-      <div class="grid grid-cols-2 items-center gap-x-2 gap-y-2">
+    <div class="flex flex-col gap-6 p-4">
+      <div class="grid grid-cols-2 items-center gap-2">
         <template v-for="row in baseRows" :key="row.label">
           <div
-            class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+            class="flex items-center text-xs/normal font-normal text-text-primary"
           >
             {{ row.label }}
           </div>
           <div
-            class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
+            class="flex min-w-0 items-center text-xs/normal font-normal text-text-secondary"
           >
             <span class="block min-w-0 truncate">{{ row.value }}</span>
             <Button
@@ -33,18 +32,15 @@
         </template>
       </div>
 
-      <div
-        v-if="extraRows.length"
-        class="grid grid-cols-2 items-center gap-x-2 gap-y-2"
-      >
+      <div v-if="extraRows.length" class="grid grid-cols-2 items-center gap-2">
         <template v-for="row in extraRows" :key="row.label">
           <div
-            class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+            class="flex items-center text-xs/normal font-normal text-text-primary"
           >
             {{ row.label }}
           </div>
           <div
-            class="flex min-w-0 items-center text-[0.75rem] leading-normal font-normal text-text-secondary"
+            class="flex min-w-0 items-center text-xs/normal font-normal text-text-secondary"
           >
             <span class="block min-w-0 truncate">{{ row.value }}</span>
           </div>
@@ -53,7 +49,7 @@
 
       <div v-if="jobState === 'failed'" class="grid grid-cols-2 gap-x-2">
         <div
-          class="flex items-center text-[0.75rem] leading-normal font-normal text-text-primary"
+          class="flex items-center text-xs/normal font-normal text-text-primary"
         >
           {{ t('queue.jobDetails.errorMessage') }}
         </div>
@@ -82,7 +78,7 @@
           </Button>
         </div>
         <div
-          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"
+          class="col-span-2 mt-2 rounded-sm bg-interface-panel-hover-surface px-4 py-2 text-xs/normal text-text-secondary"
         >
           {{ errorMessageValue }}
         </div>
diff --git a/src/components/queue/job/JobFilterActions.vue b/src/components/queue/job/JobFilterActions.vue
index fd9f8c2735..67991c2e19 100644
--- a/src/components/queue/job/JobFilterActions.vue
+++ b/src/components/queue/job/JobFilterActions.vue
@@ -27,7 +27,7 @@
           </Button>
         </template>
         <template #default="{ close }">
-          <div class="flex min-w-[12rem] flex-col items-stretch">
+          <div class="flex min-w-48 flex-col items-stretch">
             <Button
               class="w-full justify-between"
               variant="textonly"
@@ -76,7 +76,7 @@
           </Button>
         </template>
         <template #default="{ close }">
-          <div class="flex min-w-[12rem] flex-col items-stretch">
+          <div class="flex min-w-48 flex-col items-stretch">
             <template v-for="(mode, index) in jobSortModes" :key="mode">
               <Button
                 class="w-full justify-between"
diff --git a/src/components/queue/job/QueueAssetPreview.vue b/src/components/queue/job/QueueAssetPreview.vue
index 771e5b6e2e..040a0ebf61 100644
--- a/src/components/queue/job/QueueAssetPreview.vue
+++ b/src/components/queue/job/QueueAssetPreview.vue
@@ -6,7 +6,7 @@
           ref="imgRef"
           :src="imageUrl"
           :alt="name"
-          class="h-full w-full cursor-pointer object-contain"
+          class="size-full cursor-pointer object-contain"
           @click="$emit('image-click')"
           @load="onImgLoad"
         />
@@ -23,14 +23,14 @@
       </div>
       <div class="mt-2 text-center">
         <div
-          class="truncate text-[0.875rem] leading-normal font-semibold text-text-primary"
+          class="truncate text-sm/normal font-semibold text-text-primary"
           :title="name"
         >
           {{ name }}
         </div>
         <div
           v-if="width && height"
-          class="mt-1 text-[0.75rem] leading-normal text-text-secondary"
+          class="mt-1 text-xs/normal text-text-secondary"
         >
           {{ width }}x{{ height }}
         </div>
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index 5e2b0b7471..8d2b59a28f 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -66,17 +66,17 @@
       <div class="relative z-1 flex items-center gap-1">
         <div class="relative inline-flex items-center justify-center">
           <div
-            class="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2"
+            class="absolute left-1/2 top-1/2 size-10 -translate-1/2"
             @mouseenter.stop="onIconEnter"
             @mouseleave.stop="onIconLeave"
           />
           <div
-            class="inline-flex h-6 w-6 items-center justify-center overflow-hidden rounded-[6px]"
+            class="inline-flex size-6 items-center justify-center overflow-hidden rounded-[6px]"
           >
             <img
               v-if="iconImageUrl"
               :src="iconImageUrl"
-              class="h-full w-full object-cover"
+              class="size-full object-cover"
             />
             <i
               v-else
diff --git a/src/components/rightSidePanel/errors/ErrorNodeCard.vue b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
index 81d600bd07..146ddcafaf 100644
--- a/src/components/rightSidePanel/errors/ErrorNodeCard.vue
+++ b/src/components/rightSidePanel/errors/ErrorNodeCard.vue
@@ -50,7 +50,7 @@
         <!-- Error Message -->
         <p
           v-if="error.message"
-          class="m-0 text-sm break-words whitespace-pre-wrap leading-relaxed px-0.5 max-h-[4lh] overflow-y-auto"
+          class="m-0 text-sm/relaxed wrap-break-word whitespace-pre-wrap px-0.5 max-h-[4lh] overflow-y-auto"
         >
           {{ error.message }}
         </p>
@@ -66,7 +66,7 @@
           "
         >
           <p
-            class="m-0 text-xs text-muted-foreground break-words whitespace-pre-wrap font-mono leading-relaxed"
+            class="m-0 text-xs/relaxed text-muted-foreground wrap-break-word whitespace-pre-wrap font-mono"
           >
             {{ error.details }}
           </p>
diff --git a/src/components/rightSidePanel/errors/MissingNodeCard.vue b/src/components/rightSidePanel/errors/MissingNodeCard.vue
index dd915afcba..12871e686f 100644
--- a/src/components/rightSidePanel/errors/MissingNodeCard.vue
+++ b/src/components/rightSidePanel/errors/MissingNodeCard.vue
@@ -2,7 +2,7 @@
   <div class="px-4 pb-2">
     <!-- Sub-label: cloud or OSS message shown above all pack groups -->
     <p
-      class="m-0 text-sm text-muted-foreground leading-relaxed"
+      class="m-0 text-sm/relaxed text-muted-foreground"
       :class="showManagerHint ? 'pb-3' : 'pb-5'"
     >
       {{
@@ -17,7 +17,7 @@
       v-if="showManagerHint"
       keypath="rightSidePanel.missingNodePacks.ossManagerDisabledHint"
       tag="p"
-      class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed"
+      class="m-0 pb-5 text-sm/relaxed text-muted-foreground"
     >
       <template #pipCmd>
         <code
diff --git a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
index 03bfa3468e..472d0b5853 100644
--- a/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
+++ b/src/components/rightSidePanel/errors/MissingPackGroupRow.vue
@@ -8,7 +8,7 @@
         class="icon-[lucide--triangle-alert] size-4 text-warning-background shrink-0 mr-1.5"
       />
       <p
-        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+        class="flex-1 min-w-0 text-sm font-medium truncate"
         :class="
           group.packId === null && !group.isResolving
             ? 'text-warning-background'
@@ -101,7 +101,7 @@
         group.packId !== null &&
         (nodePack || comfyManagerStore.isPackInstalled(group.packId))
       "
-      class="flex items-start w-full pt-1 pb-1"
+      class="flex items-start w-full py-1"
     >
       <Button
         variant="secondary"
@@ -141,7 +141,7 @@
     <!-- Registry still loading: packId known but result not yet available -->
     <div
       v-else-if="group.packId !== null && shouldShowManagerButtons && isLoading"
-      class="flex items-start w-full pt-1 pb-1"
+      class="flex items-start w-full py-1"
     >
       <div
         class="flex flex-1 h-8 items-center justify-center overflow-hidden p-2 rounded-lg min-w-0 bg-secondary-background opacity-60 cursor-not-allowed select-none"
@@ -156,7 +156,7 @@
     <!-- Search in Manager: fetch done but pack not found in registry -->
     <div
       v-else-if="group.packId !== null && shouldShowManagerButtons"
-      class="flex items-start w-full pt-1 pb-1"
+      class="flex items-start w-full py-1"
     >
       <Button
         variant="secondary"
diff --git a/src/components/rightSidePanel/errors/TabErrors.vue b/src/components/rightSidePanel/errors/TabErrors.vue
index cfe1df4611..ef39429658 100644
--- a/src/components/rightSidePanel/errors/TabErrors.vue
+++ b/src/components/rightSidePanel/errors/TabErrors.vue
@@ -139,7 +139,7 @@
       <i18n-t
         keypath="rightSidePanel.errorHelp"
         tag="p"
-        class="m-0 text-sm text-muted-foreground leading-tight break-words"
+        class="m-0 text-sm/tight text-muted-foreground wrap-break-word"
       >
         <template #github>
           <Button
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index c33bd6dd0c..2268b88d01 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -142,7 +142,7 @@ const displayLabel = customRef((track, trigger) => {
       cn(
         'widget-item col-span-full grid grid-cols-subgrid rounded-lg group',
         isDraggable &&
-          'draggable-item !will-change-auto drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
+          'draggable-item will-change-auto! drag-handle cursor-grab bg-comfy-menu-bg [&.is-draggable]:cursor-grabbing outline-comfy-menu-bg [&.is-draggable]:outline-4 [&.is-draggable]:outline-offset-0 [&.is-draggable]:opacity-70'
       )
     "
   >
@@ -160,7 +160,7 @@ const displayLabel = customRef((track, trigger) => {
         :model-value="displayLabel"
         :is-editing="isEditing"
         :input-attrs="{ placeholder: widget.name }"
-        class="text-sm leading-8 p-0 m-0 truncate pointer-events-auto cursor-text"
+        class="text-sm/8 p-0 m-0 truncate pointer-events-auto cursor-text"
         @edit="displayLabel = $event"
         @cancel="isEditing = false"
         @click="isEditing = true"
diff --git a/src/components/rightSidePanel/settings/LayoutField.vue b/src/components/rightSidePanel/settings/LayoutField.vue
index e8e4e12b5f..0a315c1ba4 100644
--- a/src/components/rightSidePanel/settings/LayoutField.vue
+++ b/src/components/rightSidePanel/settings/LayoutField.vue
@@ -35,7 +35,7 @@ defineProps<{
 
       <i
         v-if="tooltip"
-        class="icon-[lucide--info] ml-0.5 size-3 relative top-[1px] group-hover:text-primary"
+        class="icon-[lucide--info] ml-0.5 size-3 relative top-px group-hover:text-primary"
       />
     </span>
     <slot />
diff --git a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index 1843ef9240..a3af2b6898 100644
--- a/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -38,7 +38,7 @@ function getIcon() {
       <div class="text-xs text-text-secondary line-clamp-1">
         {{ nodeTitle }}
       </div>
-      <div class="text-sm line-clamp-1 leading-8">{{ widgetName }}</div>
+      <div class="text-sm/8 line-clamp-1">{{ widgetName }}</div>
     </div>
     <Button
       variant="muted-textonly"
diff --git a/src/components/sidebar/ComfyMenuButton.vue b/src/components/sidebar/ComfyMenuButton.vue
index 47b59517a3..6f89e1f7b8 100644
--- a/src/components/sidebar/ComfyMenuButton.vue
+++ b/src/components/sidebar/ComfyMenuButton.vue
@@ -11,7 +11,7 @@
     }"
     @click="onLogoMenuClick($event)"
   >
-    <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-black">
+    <div class="flex size-8 items-center justify-center rounded-lg bg-black">
       <ComfyLogo
         alt="ComfyUI Logo"
         class="comfyui-logo h-[18px] w-[18px] text-white"
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 93f4c14e6f..4876bcb753 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -8,7 +8,7 @@
       'connected-sidebar pointer-events-auto': isConnected,
       'floating-sidebar': !isConnected,
       'overflowing-sidebar': isOverflowing,
-      'border-r border-[var(--interface-stroke)] shadow-interface': isConnected
+      'border-r border-(--interface-stroke) shadow-interface': isConnected
     }"
   >
     <div
diff --git a/src/components/sidebar/tabs/AssetsSidebarGridView.vue b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
index 3116da661f..7e08d7841f 100644
--- a/src/components/sidebar/tabs/AssetsSidebarGridView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarGridView.vue
@@ -3,7 +3,7 @@
     <!-- Assets Header -->
     <div v-if="assets.length" class="px-2 2xl:px-4">
       <div
-        class="flex items-center py-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+        class="flex items-center py-2 text-sm/normal font-normal text-muted-foreground font-inter"
       >
         {{
           t(
diff --git a/src/components/sidebar/tabs/AssetsSidebarListView.vue b/src/components/sidebar/tabs/AssetsSidebarListView.vue
index bd99208082..52ce2549fe 100644
--- a/src/components/sidebar/tabs/AssetsSidebarListView.vue
+++ b/src/components/sidebar/tabs/AssetsSidebarListView.vue
@@ -2,7 +2,7 @@
   <div class="flex h-full flex-col">
     <div v-if="assetItems.length" class="px-2">
       <div
-        class="flex items-center p-2 text-sm font-normal leading-normal text-muted-foreground font-inter"
+        class="flex items-center p-2 text-sm/normal font-normal text-muted-foreground font-inter"
       >
         {{
           t(
diff --git a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
index ddb1b689a3..576272cc5b 100644
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
@@ -20,7 +20,7 @@
             </DropdownMenuTrigger>
             <DropdownMenuPortal>
               <DropdownMenuContent
-                class="z-[9999] min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
+                class="z-9999 min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
                 align="end"
                 :side-offset="4"
               >
@@ -51,7 +51,7 @@
             </DropdownMenuTrigger>
             <DropdownMenuPortal>
               <DropdownMenuContent
-                class="z-[9999] min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
+                class="z-9999 min-w-32 rounded-lg border border-border-default bg-comfy-menu-bg p-1 shadow-lg"
                 align="end"
                 :side-offset="4"
               >
diff --git a/src/components/sidebar/tabs/SidebarTabTemplate.vue b/src/components/sidebar/tabs/SidebarTabTemplate.vue
index 459d1f2b04..3031b4e276 100644
--- a/src/components/sidebar/tabs/SidebarTabTemplate.vue
+++ b/src/components/sidebar/tabs/SidebarTabTemplate.vue
@@ -2,7 +2,7 @@
   <div
     :class="
       cn(
-        'comfy-vue-side-bar-container group/sidebar-tab flex h-full flex-col w-full',
+        'comfy-vue-side-bar-container group/sidebar-tab flex size-full flex-col',
         props.class
       )
     "
diff --git a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
index ed16819e38..442a7b24e6 100644
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="container" class="model-lib-node-container h-full w-full">
+  <div ref="container" class="model-lib-node-container size-full">
     <TreeExplorerTreeNode :node="node">
       <template #before-label>
         <span v-if="modelPreviewUrl" class="model-lib-model-icon-container">
diff --git a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
index 181bb5a101..a452399085 100644
--- a/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
@@ -12,7 +12,7 @@
     <i :class="cn(nodeIcon, 'size-6 text-muted-foreground')" />
 
     <TextTickerMultiLine
-      class="shrink-0 h-7 w-full text-xs font-normal text-foreground leading-normal mt-2"
+      class="shrink-0 h-7 w-full text-xs/normal font-normal text-foreground mt-2"
     >
       {{ node.label }}
     </TextTickerMultiLine>
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue b/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
index 5c254d23ba..f4a22b1726 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
@@ -2,7 +2,7 @@
   <Teleport to="body">
     <div
       v-if="isDragging && draggedNode && showPreview"
-      class="pointer-events-none fixed z-[10000]"
+      class="pointer-events-none fixed z-10000"
       :style="{
         left: `${previewPosition.x + 12}px`,
         top: `${previewPosition.y + 12}px`
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
index 926596aa65..854947b0ef 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="container"
-    class="node-lib-node-container h-full w-full"
+    class="node-lib-node-container size-full"
     data-testid="node-tree-leaf"
     :data-node-name="nodeDef.display_name"
   >
diff --git a/src/components/templates/thumbnails/AudioThumbnail.vue b/src/components/templates/thumbnails/AudioThumbnail.vue
index 2d7c0bc1cb..b5c04f0a2e 100644
--- a/src/components/templates/thumbnails/AudioThumbnail.vue
+++ b/src/components/templates/thumbnails/AudioThumbnail.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseThumbnail>
     <div
-      class="flex h-full w-full items-center justify-center p-4"
+      class="flex size-full items-center justify-center p-4"
       :style="{
         backgroundImage: 'url(/assets/images/default-template.png)',
         backgroundRepeat: 'round'
diff --git a/src/components/templates/thumbnails/BaseThumbnail.vue b/src/components/templates/thumbnails/BaseThumbnail.vue
index 916d0ebaca..4625176125 100644
--- a/src/components/templates/thumbnails/BaseThumbnail.vue
+++ b/src/components/templates/thumbnails/BaseThumbnail.vue
@@ -5,18 +5,18 @@
     <div
       v-if="!error"
       ref="contentRef"
-      class="h-full w-full transform-gpu transition-transform duration-1000 ease-out"
+      class="size-full transform-gpu transition-transform duration-1000 ease-out"
       :style="
         isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
       "
     >
       <slot />
     </div>
-    <div v-else class="flex h-full w-full items-center justify-center">
+    <div v-else class="flex size-full items-center justify-center">
       <img
         src="/assets/images/default-template.png"
         draggable="false"
-        class="h-full w-full transform-gpu object-cover transition-transform duration-300 ease-out"
+        class="size-full transform-gpu object-cover transition-transform duration-300 ease-out"
       />
     </div>
   </div>
diff --git a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
index 9ba49b565a..3e0b2972ad 100644
--- a/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
+++ b/src/components/templates/thumbnails/HoverDissolveThumbnail.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <div class="relative h-full w-full">
+    <div class="relative size-full">
       <div class="absolute inset-0">
         <LazyImage
           :src="baseImageSrc"
diff --git a/src/components/templates/thumbnails/LogoOverlay.vue b/src/components/templates/thumbnails/LogoOverlay.vue
index 3dc4846b4d..fef38a1eec 100644
--- a/src/components/templates/thumbnails/LogoOverlay.vue
+++ b/src/components/templates/thumbnails/LogoOverlay.vue
@@ -19,7 +19,7 @@
           data-testid="logo-img"
           :src="logo.urls[providerIndex]"
           :alt="provider"
-          class="h-6 w-6 rounded-full border-2 border-white object-cover"
+          class="size-6 rounded-full border-2 border-white object-cover"
           :class="{ relative: providerIndex > 0 }"
           :style="
             providerIndex > 0 ? { marginLeft: `${logo.gap ?? -6}px` } : {}
diff --git a/src/components/ui/search-input/searchInput.variants.ts b/src/components/ui/search-input/searchInput.variants.ts
index 2a31fd5026..dd4800a2e6 100644
--- a/src/components/ui/search-input/searchInput.variants.ts
+++ b/src/components/ui/search-input/searchInput.variants.ts
@@ -7,8 +7,8 @@ export const searchInputVariants = cva({
     size: {
       sm: 'h-6 p-1',
       md: 'h-8 px-2 py-1.5',
-      lg: 'h-10 px-2 py-2',
-      xl: 'h-12 px-2 py-2'
+      lg: 'h-10 p-2',
+      xl: 'h-12 p-2'
     }
   },
   defaultVariants: { size: 'md' }
diff --git a/src/components/ui/select/SelectItem.vue b/src/components/ui/select/SelectItem.vue
index 8400adc33f..4df78e6460 100644
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@@ -21,7 +21,7 @@ const { class: className, ...restProps } = defineProps<
         'focus:bg-secondary-background-hover',
         'data-[state=checked]:bg-secondary-background-selected',
         'data-[state=checked]:hover:bg-secondary-background-selected',
-        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        'data-disabled:pointer-events-none data-disabled:opacity-50',
         className
       )
     "
diff --git a/src/components/ui/select/SelectTrigger.vue b/src/components/ui/select/SelectTrigger.vue
index 768048ab16..1926fc412c 100644
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@@ -21,7 +21,7 @@ const { class: className, ...restProps } = defineProps<
         'border-[2.5px] border-solid border-transparent',
         'transition-all duration-200 ease-in-out',
         'focus:border-node-component-border focus:outline-none',
-        'data-[placeholder]:text-muted-foreground',
+        'data-placeholder:text-muted-foreground',
         'disabled:cursor-not-allowed disabled:opacity-60',
         '[&>span]:truncate',
         className
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index 7d7a951212..d0177cb558 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     data-slot="slider"
     :class="
       cn(
-        'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50',
+        'relative flex w-full touch-none items-center select-none data-disabled:opacity-50',
         'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
         props.class
       )
diff --git a/src/components/ui/tags-input/TagsInputItemDelete.vue b/src/components/ui/tags-input/TagsInputItemDelete.vue
index d5cc0a9331..a2493f7e96 100644
--- a/src/components/ui/tags-input/TagsInputItemDelete.vue
+++ b/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -24,7 +24,7 @@ const { t } = useI18n()
     :aria-label="t('g.removeTag')"
     :class="
       cn(
-        'opacity-60 hover:bg-transparent hover:opacity-100 transition-[opacity,width] duration-150 w-4 data-[disabled]:w-0 data-[disabled]:opacity-0 data-[disabled]:pointer-events-none overflow-hidden',
+        'opacity-60 hover:bg-transparent hover:opacity-100 transition-[opacity,width] duration-150 w-4 data-disabled:w-0 data-disabled:opacity-0 data-disabled:pointer-events-none overflow-hidden',
         className
       )
     "
diff --git a/src/components/widget/SampleModelSelector.vue b/src/components/widget/SampleModelSelector.vue
index ab07080e8f..0afe967459 100644
--- a/src/components/widget/SampleModelSelector.vue
+++ b/src/components/widget/SampleModelSelector.vue
@@ -87,12 +87,12 @@
           <template #top>
             <CardTop ratio="landscape">
               <template #default>
-                <div class="h-full w-full bg-blue-500"></div>
+                <div class="size-full bg-blue-500"></div>
               </template>
               <template #top-right>
                 <Button
                   size="icon"
-                  class="!bg-white !text-neutral-900"
+                  class="bg-white! text-neutral-900!"
                   @click="() => {}"
                 >
                   <i class="icon-[lucide--info]" />
diff --git a/src/components/widget/layout/BaseModalLayout.vue b/src/components/widget/layout/BaseModalLayout.vue
index 82523f3ce6..733d5c4643 100644
--- a/src/components/widget/layout/BaseModalLayout.vue
+++ b/src/components/widget/layout/BaseModalLayout.vue
@@ -4,7 +4,7 @@
     @keydown.esc.capture="handleEscape"
   >
     <div
-      class="grid h-full w-full transition-[grid-template-columns] duration-300 ease-out"
+      class="grid size-full transition-[grid-template-columns] duration-300 ease-out"
       :style="gridStyle"
     >
       <nav
diff --git a/src/platform/assets/components/AssetBrowserModal.vue b/src/platform/assets/components/AssetBrowserModal.vue
index 8745f3cc75..f04c8f5115 100644
--- a/src/platform/assets/components/AssetBrowserModal.vue
+++ b/src/platform/assets/components/AssetBrowserModal.vue
@@ -75,7 +75,7 @@
       <ModelInfoPanel v-if="focusedAsset" :asset="focusedAsset" :cache-key />
       <div
         v-else
-        class="flex h-full items-center justify-center break-words p-6 text-center text-muted"
+        class="flex h-full items-center justify-center wrap-break-word p-6 text-center text-muted"
       >
         {{ $t('assetBrowser.modelInfo.selectModelPrompt') }}
       </div>
diff --git a/src/platform/assets/components/AssetCard.vue b/src/platform/assets/components/AssetCard.vue
index 310168bd58..afcb542825 100644
--- a/src/platform/assets/components/AssetCard.vue
+++ b/src/platform/assets/components/AssetCard.vue
@@ -20,7 +20,7 @@
     <div class="relative aspect-square w-full overflow-hidden rounded-xl">
       <div
         v-if="isLoading || error"
-        class="flex size-full cursor-pointer items-center justify-center bg-gradient-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
+        class="flex size-full cursor-pointer items-center justify-center bg-linear-to-br from-smoke-400 via-smoke-800 to-charcoal-400"
       />
       <img
         v-else
diff --git a/src/platform/assets/components/AssetExportProgressDialog.vue b/src/platform/assets/components/AssetExportProgressDialog.vue
index 24a9bd2bd6..316d8dfca1 100644
--- a/src/platform/assets/components/AssetExportProgressDialog.vue
+++ b/src/platform/assets/components/AssetExportProgressDialog.vue
@@ -76,7 +76,7 @@ function closeDialog() {
         </h3>
       </div>
 
-      <div class="relative max-h-75 overflow-y-auto px-4 py-4">
+      <div class="relative max-h-75 overflow-y-auto p-4">
         <div class="flex flex-col gap-2">
           <div
             v-for="job in exportJobs"
diff --git a/src/platform/assets/components/MediaAssetFilterMenu.vue b/src/platform/assets/components/MediaAssetFilterMenu.vue
index dc7cbe82bc..2d9df72ed2 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-sm 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="
           mediaTypeFilters.includes(filter.type)
             ? 'bg-primary-background border-primary-background'
diff --git a/src/platform/assets/components/MediaTitle.vue b/src/platform/assets/components/MediaTitle.vue
index 4a28245b8a..897f1c74f9 100644
--- a/src/platform/assets/components/MediaTitle.vue
+++ b/src/platform/assets/components/MediaTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <p
-    class="m-0 line-clamp-2 text-sm text-base-foreground leading-tight break-all"
+    class="m-0 line-clamp-2 text-sm/tight text-base-foreground break-all"
     :title="fileName"
   >
     {{ fileName }}
diff --git a/src/platform/assets/components/ModelImportProgressDialog.vue b/src/platform/assets/components/ModelImportProgressDialog.vue
index 03bbf84aa4..ed27d7dc3f 100644
--- a/src/platform/assets/components/ModelImportProgressDialog.vue
+++ b/src/platform/assets/components/ModelImportProgressDialog.vue
@@ -141,7 +141,7 @@ function closeDialog() {
         </div>
       </div>
 
-      <div class="relative max-h-75 overflow-y-auto px-4 py-4">
+      <div class="relative max-h-75 overflow-y-auto p-4">
         <div
           v-if="filteredJobs.length > 3"
           class="absolute right-1 top-4 h-12 w-1 rounded-full bg-muted-foreground"
diff --git a/src/platform/assets/components/UploadModelUrlInput.vue b/src/platform/assets/components/UploadModelUrlInput.vue
index 0aa679c280..916bdeb525 100644
--- a/src/platform/assets/components/UploadModelUrlInput.vue
+++ b/src/platform/assets/components/UploadModelUrlInput.vue
@@ -14,7 +14,7 @@
               <img
                 :src="civitaiIcon"
                 :alt="$t('assetBrowser.providerCivitai')"
-                class="w-4 h-4"
+                class="size-4"
               />
               <a
                 :href="civitaiUrl"
@@ -29,7 +29,7 @@
               <img
                 :src="huggingFaceIcon"
                 :alt="$t('assetBrowser.providerHuggingFace')"
-                class="w-4 h-4"
+                class="size-4"
               />
               <a
                 :href="huggingFaceUrl"
diff --git a/src/platform/cloud/onboarding/CloudForgotPasswordView.vue b/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
index 93add77577..37d90d67a0 100644
--- a/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
+++ b/src/platform/cloud/onboarding/CloudForgotPasswordView.vue
@@ -3,7 +3,7 @@
     <div class="max-w-[100vw] p-2 lg:w-96">
       <!-- Header -->
       <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-xl leading-normal font-medium">
+        <h1 class="my-0 text-xl/normal font-medium">
           {{ t('cloudForgotPassword_title') }}
         </h1>
         <p class="my-0 text-base text-muted">
@@ -52,7 +52,7 @@
           <Button
             type="button"
             variant="secondary"
-            class="h-10 bg-[#2d2e32]"
+            class="h-10 bg-charcoal-500"
             @click="navigateToLogin"
           >
             {{ t('cloudForgotPassword_backToLogin') }}
diff --git a/src/platform/cloud/onboarding/CloudLoginView.vue b/src/platform/cloud/onboarding/CloudLoginView.vue
index be2c8f1766..abdf2303e3 100644
--- a/src/platform/cloud/onboarding/CloudLoginView.vue
+++ b/src/platform/cloud/onboarding/CloudLoginView.vue
@@ -3,7 +3,7 @@
     <div class="max-w-screen p-2 lg:w-96">
       <!-- Header -->
       <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-xl leading-normal font-medium">
+        <h1 class="my-0 text-xl/normal font-medium">
           {{ t('auth.login.title') }}
         </h1>
         <i18n-t
@@ -46,7 +46,7 @@
 
           <Button
             type="button"
-            class="h-10 bg-[#2d2e32]"
+            class="h-10 bg-charcoal-500"
             variant="secondary"
             @click="signInWithGithub"
           >
diff --git a/src/platform/cloud/onboarding/CloudSignupView.vue b/src/platform/cloud/onboarding/CloudSignupView.vue
index b388acae38..b3445f4ed4 100644
--- a/src/platform/cloud/onboarding/CloudSignupView.vue
+++ b/src/platform/cloud/onboarding/CloudSignupView.vue
@@ -3,7 +3,7 @@
     <div class="max-w-screen p-2 lg:w-96">
       <!-- Header -->
       <div class="mb-8 flex flex-col gap-4">
-        <h1 class="my-0 text-xl leading-normal font-medium">
+        <h1 class="my-0 text-xl/normal font-medium">
           {{ t('auth.signup.title') }}
         </h1>
         <p class="my-0 text-base">
@@ -50,7 +50,7 @@
 
           <Button
             type="button"
-            class="h-10 bg-[#2d2e32]"
+            class="h-10 bg-charcoal-500"
             variant="secondary"
             @click="signInWithGithub"
           >
diff --git a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
index 056720b1bd..285d2989c3 100644
--- a/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
+++ b/src/platform/cloud/onboarding/CloudSubscriptionRedirectView.vue
@@ -97,17 +97,17 @@ onMounted(() => {
 
 <template>
   <div
-    class="flex h-full w-full items-center justify-center bg-comfy-menu-secondary-bg"
+    class="flex size-full items-center justify-center bg-comfy-menu-secondary-bg"
   >
     <div class="flex flex-col items-center gap-4">
       <img
         src="/assets/images/comfy-logo-single.svg"
         :alt="t('g.comfyOrgLogoAlt')"
-        class="h-16 w-16"
+        class="size-16"
       />
       <p
         v-if="selectedTierKey"
-        class="font-inter text-base font-normal leading-normal text-base-foreground"
+        class="font-inter text-base/normal font-normal text-base-foreground"
       >
         {{
           t('subscription.subscribeTo', {
@@ -115,11 +115,7 @@ onMounted(() => {
           })
         }}
       </p>
-      <ProgressSpinner
-        v-if="selectedTierKey"
-        class="h-8 w-8"
-        stroke-width="4"
-      />
+      <ProgressSpinner v-if="selectedTierKey" class="size-8" stroke-width="4" />
       <Button
         v-if="selectedTierKey"
         as="a"
diff --git a/src/platform/cloud/onboarding/UserCheckView.vue b/src/platform/cloud/onboarding/UserCheckView.vue
index e18596f29f..a5f14ae9f8 100644
--- a/src/platform/cloud/onboarding/UserCheckView.vue
+++ b/src/platform/cloud/onboarding/UserCheckView.vue
@@ -15,7 +15,7 @@
     </div>
   </div>
   <div v-else class="flex items-center justify-center">
-    <ProgressSpinner class="h-8 w-8" />
+    <ProgressSpinner class="size-8" />
   </div>
 </template>
 
diff --git a/src/platform/cloud/onboarding/components/CloudSignInForm.vue b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
index 57718328c6..51981901e9 100644
--- a/src/platform/cloud/onboarding/components/CloudSignInForm.vue
+++ b/src/platform/cloud/onboarding/components/CloudSignInForm.vue
@@ -63,7 +63,7 @@
     </Message>
 
     <!-- Submit Button -->
-    <ProgressSpinner v-if="loading" class="h-8 w-8" />
+    <ProgressSpinner v-if="loading" class="size-8" />
     <Button
       v-else
       type="submit"
diff --git a/src/platform/cloud/onboarding/components/CloudTemplate.vue b/src/platform/cloud/onboarding/components/CloudTemplate.vue
index 7a21a01b73..f96acd5ea7 100644
--- a/src/platform/cloud/onboarding/components/CloudTemplate.vue
+++ b/src/platform/cloud/onboarding/components/CloudTemplate.vue
@@ -12,7 +12,7 @@
     <div class="relative hidden flex-1 overflow-hidden bg-black lg:block">
       <!-- Video Background -->
       <video
-        class="absolute inset-0 h-full w-full object-cover"
+        class="absolute inset-0 size-full object-cover"
         autoplay
         muted
         loop
@@ -22,7 +22,7 @@
         <source :src="videoSrc" type="video/mp4" />
       </video>
 
-      <div class="absolute inset-0 h-full w-full bg-black/30"></div>
+      <div class="absolute inset-0 size-full bg-black/30"></div>
 
       <!-- Optional Overlay for better visual -->
       <div
diff --git a/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
index 9727cb6bbf..1cf6767420 100644
--- a/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
+++ b/src/platform/cloud/onboarding/skeletons/CloudLoginViewSkeleton.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full items-center justify-center p-8">
     <div class="max-w-[100vw] lg:w-96">
-      <div class="rounded-lg bg-[#2d2e32] p-4">
+      <div class="rounded-lg bg-charcoal-500 p-4">
         <Skeleton width="60%" height="1.125rem" class="mb-2" />
         <Skeleton width="90%" height="1rem" class="mb-2" />
         <Skeleton width="80%" height="1rem" />
diff --git a/src/platform/cloud/subscription/components/FreeTierDialogContent.vue b/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
index 97cdeda33e..8f8723c15a 100644
--- a/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
+++ b/src/platform/cloud/subscription/components/FreeTierDialogContent.vue
@@ -4,7 +4,7 @@
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      class="rounded-full absolute top-2.5 right-2.5 z-10 size-8 p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
       @click="$emit('close', false)"
     >
@@ -84,7 +84,7 @@
 
       <div class="flex flex-col pt-8">
         <Button
-          class="w-full rounded-lg bg-[var(--color-accent-blue,#0B8CE9)] px-4 py-2 font-inter text-sm font-bold text-white hover:bg-[var(--color-accent-blue,#0B8CE9)]/90"
+          class="w-full rounded-lg bg-(--color-accent-blue,#0B8CE9) px-4 py-2 font-inter text-sm font-bold text-white hover:bg-(--color-accent-blue,#0B8CE9)/90"
           @click="$emit('upgrade')"
         >
           {{
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
index e56be22c90..e9b3ccdfdb 100644
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -52,7 +52,7 @@
         <div class="p-8 pb-0 flex flex-col gap-8">
           <div class="flex flex-row items-center gap-2 justify-between">
             <span
-              class="font-inter text-base font-bold leading-normal text-base-foreground"
+              class="font-inter text-base/normal font-bold text-base-foreground"
             >
               {{ tier.name }}
             </span>
@@ -77,9 +77,7 @@
                   </span>
                   ${{ getPrice(tier) }}
                 </span>
-                <span
-                  class="font-inter text-xl leading-normal text-base-foreground"
-                >
+                <span class="font-inter text-xl/normal text-base-foreground">
                   {{ t('subscription.usdPerMonth') }}
                 </span>
               </div>
@@ -100,7 +98,7 @@
           <div class="flex flex-col gap-4 pb-0 flex-1">
             <div class="flex flex-row items-center justify-between">
               <span
-                class="font-inter text-sm font-normal leading-normal text-foreground"
+                class="font-inter text-sm/normal font-normal text-foreground"
               >
                 {{
                   currentBillingCycle === 'yearly'
@@ -111,7 +109,7 @@
               <div class="flex flex-row items-center gap-1">
                 <i class="icon-[lucide--component] text-amber-400 text-sm" />
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground"
                 >
                   {{ n(getCreditsDisplay(tier)) }}
                 </span>
@@ -123,7 +121,7 @@
                 {{ t('subscription.maxDurationLabel') }}
               </span>
               <span
-                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                class="font-inter text-sm/normal font-bold text-base-foreground"
               >
                 {{ tier.maxDuration }}
               </span>
@@ -157,9 +155,7 @@
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-start justify-between">
                 <div class="flex flex-col gap-2">
-                  <span
-                    class="text-sm font-normal text-foreground leading-relaxed"
-                  >
+                  <span class="text-sm/relaxed font-normal text-foreground">
                     {{ t('subscription.videoEstimateLabel') }}
                   </span>
                   <div class="flex flex-row items-center gap-2 group pt-2">
@@ -175,7 +171,7 @@
                   </div>
                 </div>
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground"
                 >
                   ~{{ n(tier.pricing.videoEstimate) }}
                 </span>
@@ -222,7 +218,7 @@
       }"
     >
       <div class="flex flex-col gap-2">
-        <p class="text-sm text-base-foreground leading-normal">
+        <p class="text-sm/normal text-base-foreground">
           {{ t('subscription.videoEstimateExplanation') }}
         </p>
         <a
diff --git a/src/platform/cloud/subscription/components/SubscriptionPanel.vue b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
index eece4d6442..6ddde0a790 100644
--- a/src/platform/cloud/subscription/components/SubscriptionPanel.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionPanel.vue
@@ -2,7 +2,7 @@
   <div class="subscription-container h-full">
     <div class="flex h-full flex-col gap-6">
       <div class="flex items-center gap-2">
-        <span class="text-2xl font-inter font-semibold leading-tight">
+        <span class="text-2xl/tight font-inter font-semibold">
           {{
             isActiveSubscription
               ? $t('subscription.title')
diff --git a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
index 0c7030e0f8..27e2f983c8 100644
--- a/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
+++ b/src/platform/cloud/subscription/components/SubscriptionRequiredDialogContent.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="showCustomPricingTable"
-    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
+    class="relative flex flex-col p-4 pt-8 md:p-16 overflow-y-auto! h-full gap-8"
   >
     <Button
       size="icon"
@@ -51,7 +51,7 @@
     <Button
       size="icon"
       variant="muted-textonly"
-      class="rounded-full absolute top-2.5 right-2.5 z-10 h-8 w-8 p-0 text-white hover:bg-white/20"
+      class="rounded-full absolute top-2.5 right-2.5 z-10 size-8 p-0 text-white hover:bg-white/20"
       :aria-label="$t('g.close')"
       @click="handleClose"
     >
diff --git a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
index a2b2020b5b..14893fe539 100644
--- a/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
+++ b/src/platform/nodeReplacement/components/SwapNodeGroupRow.vue
@@ -2,9 +2,7 @@
   <div class="flex flex-col w-full mb-4">
     <!-- Type header row: type name + chevron -->
     <div class="flex h-8 items-center w-full">
-      <p
-        class="flex-1 min-w-0 text-sm font-medium overflow-hidden text-ellipsis whitespace-nowrap text-foreground"
-      >
+      <p class="flex-1 min-w-0 text-sm font-medium truncate text-foreground">
         {{ `${group.type} (${group.nodeTypes.length})` }}
       </p>
 
@@ -79,7 +77,7 @@
     </div>
 
     <!-- Replace Action Button -->
-    <div class="flex items-start w-full pt-1 pb-1">
+    <div class="flex items-start w-full py-1">
       <Button
         variant="secondary"
         size="md"
diff --git a/src/platform/nodeReplacement/components/SwapNodesCard.vue b/src/platform/nodeReplacement/components/SwapNodesCard.vue
index f4b3fc601d..1a3758203f 100644
--- a/src/platform/nodeReplacement/components/SwapNodesCard.vue
+++ b/src/platform/nodeReplacement/components/SwapNodesCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="px-4 pb-2 mt-2">
     <!-- Sub-label: guidance message shown above all swap groups -->
-    <p class="m-0 pb-5 text-sm text-muted-foreground leading-relaxed">
+    <p class="m-0 pb-5 text-sm/relaxed text-muted-foreground">
       {{
         t(
           'nodeReplacement.swapNodesGuide',
diff --git a/src/platform/secrets/components/SecretListItem.vue b/src/platform/secrets/components/SecretListItem.vue
index 1d8ac592b1..02fca29f76 100644
--- a/src/platform/secrets/components/SecretListItem.vue
+++ b/src/platform/secrets/components/SecretListItem.vue
@@ -9,7 +9,7 @@
           v-if="providerLogo"
           :src="providerLogo"
           :alt="providerLabel"
-          class="h-5 w-5"
+          class="size-5"
         />
         <span
           v-else-if="secret.provider"
diff --git a/src/platform/secrets/components/SecretsPanel.vue b/src/platform/secrets/components/SecretsPanel.vue
index 85383a647c..7299ab2f79 100644
--- a/src/platform/secrets/components/SecretsPanel.vue
+++ b/src/platform/secrets/components/SecretsPanel.vue
@@ -22,7 +22,7 @@
       </div>
 
       <div v-if="loading" class="flex items-center justify-center py-8">
-        <ProgressSpinner class="h-8 w-8" />
+        <ProgressSpinner class="size-8" />
       </div>
 
       <div
diff --git a/src/platform/surveys/NightlySurveyPopover.vue b/src/platform/surveys/NightlySurveyPopover.vue
index 984215815c..30836307c1 100644
--- a/src/platform/surveys/NightlySurveyPopover.vue
+++ b/src/platform/surveys/NightlySurveyPopover.vue
@@ -108,7 +108,7 @@ function handleOptOut() {
       <div
         v-if="isVisible"
         data-testid="nightly-survey-popover"
-        class="fixed bottom-4 right-4 z-[10000] w-80 rounded-lg border border-border-subtle bg-base-background p-4 shadow-lg"
+        class="fixed bottom-4 right-4 z-10000 w-80 rounded-lg border border-border-subtle bg-base-background p-4 shadow-lg"
       >
         <div class="mb-3 flex items-start justify-between">
           <h3 class="text-sm font-medium text-text-primary">
diff --git a/src/platform/updates/components/ReleaseNotificationToast.vue b/src/platform/updates/components/ReleaseNotificationToast.vue
index c003bc9a84..d8c855b63f 100644
--- a/src/platform/updates/components/ReleaseNotificationToast.vue
+++ b/src/platform/updates/components/ReleaseNotificationToast.vue
@@ -10,7 +10,7 @@
           <div
             class="p-3 bg-primary-background-hover rounded-lg flex items-center justify-center shrink-0"
           >
-            <i class="icon-[lucide--rocket] w-4 h-4 text-white" />
+            <i class="icon-[lucide--rocket] size-4 text-white" />
           </div>
           <div class="flex flex-col gap-1">
             <div
@@ -42,7 +42,7 @@
           rel="noopener noreferrer"
           @click="handleLearnMore"
         >
-          <i class="icon-[lucide--external-link] w-4 h-4"></i>
+          <i class="icon-[lucide--external-link] size-4"></i>
           {{ $t('releaseToast.whatsNew') }}
         </a>
         <div class="flex items-center gap-4">
diff --git a/src/platform/updates/components/WhatsNewPopup.vue b/src/platform/updates/components/WhatsNewPopup.vue
index 511d053c2f..3a5c08f8f4 100644
--- a/src/platform/updates/components/WhatsNewPopup.vue
+++ b/src/platform/updates/components/WhatsNewPopup.vue
@@ -3,7 +3,7 @@
     <div class="whats-new-popup" @click.stop>
       <!-- Close Button -->
       <Button
-        class="close-button absolute top-2 right-2 z-10 w-8 h-8 p-2 rounded-lg opacity-50"
+        class="close-button absolute top-2 right-2 z-10 size-8 p-2 rounded-lg opacity-50"
         :aria-label="$t('g.close')"
         size="icon-sm"
         variant="muted-textonly"
diff --git a/src/platform/workspace/auth/WorkspaceAuthGate.vue b/src/platform/workspace/auth/WorkspaceAuthGate.vue
index 41a1d60c09..34e49b3fe3 100644
--- a/src/platform/workspace/auth/WorkspaceAuthGate.vue
+++ b/src/platform/workspace/auth/WorkspaceAuthGate.vue
@@ -2,7 +2,7 @@
   <slot v-if="isReady" />
   <div
     v-else
-    class="fixed inset-0 z-[1100] flex items-center justify-center bg-[var(--p-mask-background)]"
+    class="fixed inset-0 z-1100 flex items-center justify-center bg-(--p-mask-background)"
   >
     <Loader size="lg" class="text-white" />
   </div>
diff --git a/src/platform/workspace/components/PricingTableWorkspace.vue b/src/platform/workspace/components/PricingTableWorkspace.vue
index 305faac517..55374c003a 100644
--- a/src/platform/workspace/components/PricingTableWorkspace.vue
+++ b/src/platform/workspace/components/PricingTableWorkspace.vue
@@ -56,7 +56,7 @@
         <div class="p-8 pb-0 flex flex-col gap-8">
           <div class="flex flex-row items-center gap-2 justify-between">
             <span
-              class="font-inter text-base font-bold leading-normal text-base-foreground"
+              class="font-inter text-base/normal font-bold text-base-foreground"
             >
               {{ tier.name }}
             </span>
@@ -81,9 +81,7 @@
                   </span>
                   ${{ getPrice(tier) }}
                 </span>
-                <span
-                  class="font-inter text-sm leading-normal text-base-foreground"
-                >
+                <span class="font-inter text-sm/normal text-base-foreground">
                   {{ t('subscription.usdPerMonthPerMember') }}
                 </span>
               </div>
@@ -109,7 +107,7 @@
               <div class="flex flex-row items-center gap-1">
                 <i class="icon-[lucide--component] text-amber-400 text-sm" />
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground"
                 >
                   {{ n(getMonthlyCreditsPerMember(tier)) }}
                 </span>
@@ -121,7 +119,7 @@
                 {{ t('subscription.maxMembersLabel') }}
               </span>
               <span
-                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                class="font-inter text-sm/normal font-bold text-base-foreground"
               >
                 {{ getMaxMembers(tier) }}
               </span>
@@ -132,7 +130,7 @@
                 {{ t('subscription.maxDurationLabel') }}
               </span>
               <span
-                class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                class="font-inter text-sm/normal font-bold text-base-foreground"
               >
                 {{ tier.maxDuration }}
               </span>
@@ -166,9 +164,7 @@
             <div class="flex flex-col gap-2">
               <div class="flex flex-row items-start justify-between">
                 <div class="flex flex-col gap-2">
-                  <span
-                    class="text-sm font-normal text-foreground leading-relaxed"
-                  >
+                  <span class="text-sm/relaxed font-normal text-foreground">
                     {{ t('subscription.videoEstimateLabel') }}
                   </span>
                   <div class="flex flex-row items-center gap-2 group pt-2">
@@ -184,7 +180,7 @@
                   </div>
                 </div>
                 <span
-                  class="font-inter text-sm font-bold leading-normal text-base-foreground"
+                  class="font-inter text-sm/normal font-bold text-base-foreground"
                 >
                   ~{{ n(tier.pricing.videoEstimate) }}
                 </span>
@@ -231,7 +227,7 @@
       }"
     >
       <div class="flex flex-col gap-2">
-        <p class="text-sm text-base-foreground leading-normal">
+        <p class="text-sm/normal text-base-foreground">
           {{ t('subscription.videoEstimateExplanation') }}
         </p>
         <a
diff --git a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
index 4f1d3f3b7e..2cb1ffbac0 100644
--- a/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionRequiredDialogContentWorkspace.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative flex flex-col p-4 pt-8 md:p-16 !overflow-y-auto h-full gap-8"
+    class="relative flex flex-col p-4 pt-8 md:p-16 overflow-y-auto! h-full gap-8"
   >
     <Button
       v-if="checkoutStep === 'preview'"
diff --git a/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue b/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
index 1a79d4583d..f7d450a447 100644
--- a/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
+++ b/src/platform/workspace/components/SubscriptionTransitionPreviewWorkspace.vue
@@ -36,7 +36,7 @@
         </div>
 
         <!-- Arrow -->
-        <i class="pi pi-arrow-right text-muted-foreground w-8 h-8" />
+        <i class="pi pi-arrow-right text-muted-foreground size-8" />
 
         <!-- New Plan -->
         <div class="flex flex-col gap-1">
@@ -81,7 +81,7 @@
       <!-- Proration Section -->
       <div
         v-if="showProration"
-        class="flex flex-col gap-2 border-t border-border-subtle pt-6 pb-6"
+        class="flex flex-col gap-2 border-t border-border-subtle py-6"
       >
         <div
           v-if="proratedRefundCents > 0"
diff --git a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
index 60ff16f91b..12fe47ad8d 100644
--- a/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
+++ b/src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue
@@ -3,7 +3,7 @@
     class="flex min-w-[460px] flex-col rounded-2xl border border-border-default bg-base-background shadow-[1px_1px_8px_0_rgba(0,0,0,0.4)]"
   >
     <!-- Header -->
-    <div class="flex py-8 items-center justify-between px-8">
+    <div class="flex p-8 items-center justify-between">
       <h2 class="text-lg font-bold text-base-foreground m-0">
         {{
           isInsufficientCredits
@@ -123,7 +123,7 @@
       >
     </p>
 
-    <div class="pt-8 pb-8 flex flex-col gap-8 px-8">
+    <div class="p-8 flex flex-col gap-8">
       <Button
         :disabled="!isValidAmount || loading || isPolling"
         :loading="loading || isPolling"
diff --git a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
index 629fe47071..b9de74c833 100644
--- a/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
+++ b/src/platform/workspace/components/WorkspaceSwitcherPopover.vue
@@ -68,11 +68,11 @@
       </template>
 
       <!-- Create workspace button -->
-      <div class="px-2 py-2">
+      <div class="p-2">
         <div
           :class="
             cn(
-              'flex h-12 w-full items-center gap-2 rounded-sm px-2 py-2',
+              'flex h-12 w-full items-center gap-2 rounded-sm p-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 5b3be2f25b..99b897ea09 100644
--- a/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/CreateWorkspaceDialogContent.vue
@@ -19,7 +19,7 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-col gap-4 p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ $t('workspacePanel.createWorkspaceDialog.message') }}
       </p>
@@ -40,7 +40,7 @@
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
index 9319f507bd..e8c599c5d8 100644
--- a/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/DeleteWorkspaceDialogContent.vue
@@ -19,7 +19,7 @@
     </div>
 
     <!-- Body -->
-    <div class="px-4 py-4">
+    <div class="p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{
           workspaceName
@@ -32,7 +32,7 @@
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
index f27457f944..3a06e2597c 100644
--- a/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/EditWorkspaceDialogContent.vue
@@ -19,7 +19,7 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-col gap-4 p-4">
       <div class="flex flex-col gap-2">
         <label class="text-sm text-base-foreground">
           {{ $t('workspacePanel.editWorkspaceDialog.nameLabel') }}
@@ -34,7 +34,7 @@
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
index 635f1e1022..d8fb7af7b4 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberDialogContent.vue
@@ -24,7 +24,7 @@
 
     <!-- Body: Email Step -->
     <template v-if="step === 'email'">
-      <div class="flex flex-col gap-4 px-4 py-4">
+      <div class="flex flex-col gap-4 p-4">
         <p class="m-0 text-sm text-muted-foreground">
           {{ $t('workspacePanel.inviteMemberDialog.message') }}
         </p>
@@ -37,7 +37,7 @@
       </div>
 
       <!-- Footer: Email Step -->
-      <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <div class="flex items-center justify-end gap-4 p-4">
         <Button variant="muted-textonly" @click="onCancel">
           {{ $t('g.cancel') }}
         </Button>
@@ -55,7 +55,7 @@
 
     <!-- Body: Link Step -->
     <template v-else>
-      <div class="flex flex-col gap-4 px-4 py-4">
+      <div class="flex flex-col gap-4 p-4">
         <p class="m-0 text-sm text-muted-foreground">
           {{ $t('workspacePanel.inviteMemberDialog.linkStep.message') }}
         </p>
@@ -86,7 +86,7 @@
       </div>
 
       <!-- Footer: Link Step -->
-      <div class="flex items-center justify-end gap-4 px-4 py-4">
+      <div class="flex items-center justify-end gap-4 p-4">
         <Button variant="muted-textonly" @click="onCancel">
           {{ $t('g.cancel') }}
         </Button>
diff --git a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
index a44c369123..9f8ea12c4b 100644
--- a/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/InviteMemberUpsellDialogContent.vue
@@ -23,7 +23,7 @@
     </div>
 
     <!-- Body -->
-    <div class="flex flex-col gap-4 px-4 py-4">
+    <div class="flex flex-col gap-4 p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{
           isActiveSubscription
@@ -34,7 +34,7 @@
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onDismiss">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
index 5f22d8e0f7..0df80c4f24 100644
--- a/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/LeaveWorkspaceDialogContent.vue
@@ -19,14 +19,14 @@
     </div>
 
     <!-- Body -->
-    <div class="px-4 py-4">
+    <div class="p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ $t('workspacePanel.leaveDialog.message') }}
       </p>
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
index b43988c876..590de87a57 100644
--- a/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RemoveMemberDialogContent.vue
@@ -19,14 +19,14 @@
     </div>
 
     <!-- Body -->
-    <div class="px-4 py-4">
+    <div class="p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ $t('workspacePanel.removeMemberDialog.message') }}
       </p>
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
index ab0317a9b0..f408243f36 100644
--- a/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
+++ b/src/platform/workspace/components/dialogs/RevokeInviteDialogContent.vue
@@ -19,14 +19,14 @@
     </div>
 
     <!-- Body -->
-    <div class="px-4 py-4">
+    <div class="p-4">
       <p class="m-0 text-sm text-muted-foreground">
         {{ $t('workspacePanel.revokeInviteDialog.message') }}
       </p>
     </div>
 
     <!-- Footer -->
-    <div class="flex items-center justify-end gap-4 px-4 py-4">
+    <div class="flex items-center justify-end gap-4 p-4">
       <Button variant="muted-textonly" @click="onCancel">
         {{ $t('g.cancel') }}
       </Button>
diff --git a/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue b/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
index 35e09c23af..5cc9162353 100644
--- a/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
+++ b/src/platform/workspace/components/dialogs/settings/WorkspacePanelContent.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex h-full w-full flex-col">
+  <div class="flex size-full flex-col">
     <header class="mb-8 flex items-center gap-4">
       <WorkspaceProfilePic
-        class="size-12 !text-3xl"
+        class="size-12 text-3xl!"
         :workspace-name="workspaceName"
       />
       <h1 class="text-3xl text-base-foreground">
diff --git a/src/renderer/core/layout/transform/TransformPane.vue b/src/renderer/core/layout/transform/TransformPane.vue
index cf542bb895..9eda8f7613 100644
--- a/src/renderer/core/layout/transform/TransformPane.vue
+++ b/src/renderer/core/layout/transform/TransformPane.vue
@@ -3,7 +3,7 @@
     data-testid="transform-pane"
     :class="
       cn(
-        'absolute inset-0 w-full h-full pointer-events-none',
+        'absolute inset-0 size-full pointer-events-none',
         isInteracting ? 'transform-pane--interacting' : 'will-change-auto'
       )
     "
diff --git a/src/renderer/extensions/linearMode/AppOutput.vue b/src/renderer/extensions/linearMode/AppOutput.vue
index e808e81970..a5e2d7f517 100644
--- a/src/renderer/extensions/linearMode/AppOutput.vue
+++ b/src/renderer/extensions/linearMode/AppOutput.vue
@@ -25,7 +25,7 @@ function togglePromotion() {
   <div
     :class="
       cn(
-        'absolute w-full h-full pointer-events-auto ring-warning-background/50 ring-5 rounded-2xl',
+        'absolute size-full pointer-events-auto ring-warning-background/50 ring-5 rounded-2xl',
         isPromoted && 'ring-warning-background'
       )
     "
diff --git a/src/renderer/extensions/linearMode/ImagePreview.vue b/src/renderer/extensions/linearMode/ImagePreview.vue
index ffabdf04fa..ca41f7ec19 100644
--- a/src/renderer/extensions/linearMode/ImagePreview.vue
+++ b/src/renderer/extensions/linearMode/ImagePreview.vue
@@ -18,7 +18,7 @@ const height = ref('')
       ref="imageRef"
       :src
       v-bind="slotProps"
-      class="h-full object-contain w-full"
+      class="size-full object-contain"
       @load="
         () => {
           if (!imageRef) return
@@ -31,7 +31,7 @@ const height = ref('')
   <img
     v-else
     ref="imageRef"
-    class="contain-size grow-1 object-contain"
+    class="contain-size grow object-contain"
     :src
     @load="
       () => {
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index c8a7eebd68..442f7caab9 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -209,11 +209,11 @@ defineExpose({ runButtonClick })
       <Button v-if="false"> {{ t('menuLabels.publish') }} </Button>
     </section>
     <div
-      class="border-x md:border-y gap-2 h-full border-[var(--interface-stroke)] bg-comfy-menu-bg flex flex-col px-2"
+      class="border-x md:border-y gap-2 h-full border-(--interface-stroke) bg-comfy-menu-bg flex flex-col px-2"
     >
       <section
         data-testid="linear-widgets"
-        class="grow-1 overflow-y-auto contain-size"
+        class="grow overflow-y-auto contain-size"
       >
         <template
           v-for="(nodeData, index) of appModeStore.selectedInputs.length
@@ -223,7 +223,7 @@ defineExpose({ runButtonClick })
         >
           <div
             v-if="index !== 0 && !appModeStore.selectedInputs.length"
-            class="w-full border-t-1 border-node-component-border"
+            class="w-full border-t border-node-component-border"
           />
           <DropZone
             :on-drag-over="nodeData.onDragOver"
@@ -303,7 +303,7 @@ defineExpose({ runButtonClick })
           </Popover>
           <Button
             variant="primary"
-            class="grow-1"
+            class="grow"
             size="lg"
             @click="runButtonClick"
           >
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index ccf27a2aa8..7bf2201165 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -163,7 +163,7 @@ async function rerun(e: Event) {
   />
   <article
     v-else-if="getMediaType(selectedOutput) === 'text'"
-    class="w-full max-w-128 m-auto my-12 overflow-y-auto"
+    class="w-full max-w-lg m-auto my-12 overflow-y-auto"
     v-text="selectedOutput!.url"
   />
   <Preview3d
diff --git a/src/renderer/extensions/linearMode/MobileDisplay.vue b/src/renderer/extensions/linearMode/MobileDisplay.vue
index ec632f7df5..ac0d49ff89 100644
--- a/src/renderer/extensions/linearMode/MobileDisplay.vue
+++ b/src/renderer/extensions/linearMode/MobileDisplay.vue
@@ -149,7 +149,7 @@ const menuEntries = computed<MenuItem[]>(() => [
 ])
 </script>
 <template>
-  <section class="absolute w-full h-full flex flex-col bg-secondary-background">
+  <section class="absolute size-full flex flex-col bg-secondary-background">
     <header
       class="w-full h-16 px-4 py-3 flex border-border-subtle border-b items-center gap-3 bg-base-background"
     >
@@ -162,13 +162,13 @@ const menuEntries = computed<MenuItem[]>(() => [
         <template #button>
           <!--TODO: Use button here? Probably too much work to destyle-->
           <div
-            class="bg-secondary-background h-10 rounded-sm grow-1 flex items-center p-2 gap-2"
+            class="bg-secondary-background h-10 rounded-sm grow flex items-center p-2 gap-2"
           >
             <i
               class="shrink-0 icon-[lucide--panels-top-left] bg-primary-background"
             />
             <span
-              class="truncate contain-size h-full w-full"
+              class="truncate contain-size size-full"
               v-text="workflowStore.activeWorkflow?.filename"
             />
             <i
@@ -207,7 +207,7 @@ const menuEntries = computed<MenuItem[]>(() => [
         v-for="([label, icon], index) in tabs"
         :key="label"
         :variant="index === activeIndex ? 'secondary' : 'muted-textonly'"
-        class="flex-col h-14 grow-1"
+        class="flex-col h-14 grow"
         @click="onClick(index)"
       >
         <div class="relative size-4">
diff --git a/src/renderer/extensions/linearMode/Preview3d.vue b/src/renderer/extensions/linearMode/Preview3d.vue
index 6960b8c1d8..1ab5bba8d5 100644
--- a/src/renderer/extensions/linearMode/Preview3d.vue
+++ b/src/renderer/extensions/linearMode/Preview3d.vue
@@ -24,7 +24,7 @@ watch([containerRef, () => modelUrl], async () => {
 <template>
   <div
     ref="containerRef"
-    class="relative w-full md:w-[calc(100%-150px)] h-full self-center"
+    class="relative size-full md:w-[calc(100%-150px)] self-center"
     @mouseenter="viewer.handleMouseEnter"
     @mouseleave="viewer.handleMouseLeave"
     @resize="viewer.handleResize"
diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue
index 798f159e88..ace611d744 100644
--- a/src/renderer/extensions/vueNodes/VideoPreview.vue
+++ b/src/renderer/extensions/vueNodes/VideoPreview.vue
@@ -23,9 +23,7 @@
         role="alert"
         class="flex flex-auto flex-col items-center justify-center bg-muted-background text-center text-base-foreground py-8"
       >
-        <i
-          class="mb-2 icon-[lucide--video-off] h-12 w-12 text-base-foreground"
-        />
+        <i class="mb-2 icon-[lucide--video-off] size-12 text-base-foreground" />
         <p class="text-sm text-base-foreground">
           {{ $t('g.videoFailedToLoad') }}
         </p>
@@ -67,7 +65,7 @@
           :aria-label="$t('g.downloadVideo')"
           @click="handleDownload"
         >
-          <i class="icon-[lucide--download] h-4 w-4" />
+          <i class="icon-[lucide--download] size-4" />
         </button>
 
         <!-- Close Button -->
@@ -77,14 +75,14 @@
           :aria-label="$t('g.removeVideo')"
           @click="handleRemove"
         >
-          <i class="icon-[lucide--x] h-4 w-4" />
+          <i class="icon-[lucide--x] size-4" />
         </button>
       </div>
 
       <!-- Multiple Videos Navigation -->
       <div
         v-if="hasMultipleVideos"
-        class="absolute right-2 bottom-2 left-2 flex justify-center gap-1"
+        class="absolute inset-x-2 bottom-2 flex justify-center gap-1"
       >
         <button
           v-for="(_, index) in imageUrls"
diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
index 8a6f7c7ff2..8f840b585f 100644
--- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue
@@ -23,9 +23,7 @@
         role="alert"
         class="flex flex-1 self-center size-full flex-col items-center justify-around bg-muted-background text-center text-base-foreground py-8"
       >
-        <i
-          class="mb-2 icon-[lucide--image-off] h-12 w-12 text-base-foreground"
-        />
+        <i class="mb-2 icon-[lucide--image-off] size-12 text-base-foreground" />
         <p class="text-sm text-base-foreground">
           {{ $t('g.imageFailedToLoad') }}
         </p>
@@ -60,7 +58,7 @@
           :aria-label="$t('g.editOrMaskImage')"
           @click="handleEditMask"
         >
-          <i-comfy:mask class="h-4 w-4" />
+          <i-comfy:mask class="size-4" />
         </button>
 
         <!-- Download Button -->
@@ -70,7 +68,7 @@
           :aria-label="$t('g.downloadImage')"
           @click="handleDownload"
         >
-          <i class="icon-[lucide--download] h-4 w-4" />
+          <i class="icon-[lucide--download] size-4" />
         </button>
 
         <!-- Close Button -->
@@ -80,7 +78,7 @@
           :aria-label="$t('g.removeImage')"
           @click="handleRemove"
         >
-          <i class="icon-[lucide--x] h-4 w-4" />
+          <i class="icon-[lucide--x] size-4" />
         </button>
       </div>
     </div>
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index 703c82da92..64973785c3 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -13,7 +13,7 @@
         'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
         shapeClass,
         'touch-none flex flex-col',
-        'border-1 border-solid border-component-node-border',
+        'border border-solid border-component-node-border',
         // hover (only when node should handle events)
         shouldHandleNodePointerEvents &&
           'hover:ring-7 ring-node-component-ring',
@@ -86,7 +86,7 @@
       v-if="isCollapsed && executing && progress !== undefined"
       :class="
         cn(
-          'absolute inset-x-4 -bottom-[1px] translate-y-1/2 rounded-full',
+          'absolute inset-x-4 -bottom-px translate-y-1/2 rounded-full',
           progressClasses
         )
       "
@@ -238,7 +238,7 @@
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 12 12"
-          :class="cn('w-2/5 h-2/5 absolute', handle.svgPositionClasses)"
+          :class="cn('size-2/5 absolute', handle.svgPositionClasses)"
           :style="
             handle.svgTransform ? { transform: handle.svgTransform } : undefined
           "
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index 51bc75e8ec..666f3a402d 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -3,7 +3,7 @@
     :data-node-id="nodeData.id"
     :class="
       cn(
-        'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke',
+        'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border border-solid outline-transparent outline-2 border-node-stroke',
         position
       )
     "
diff --git a/src/renderer/extensions/vueNodes/components/LivePreview.vue b/src/renderer/extensions/vueNodes/components/LivePreview.vue
index 527406f1b1..9bf681cdb2 100644
--- a/src/renderer/extensions/vueNodes/components/LivePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LivePreview.vue
@@ -2,7 +2,7 @@
   <template v-if="imageUrl">
     <div
       v-if="imageError"
-      class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
+      class="text-pure-white flex size-full flex-col items-center justify-center text-center"
     >
       <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
       <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
index b1600efe32..e5ab1952b9 100644
--- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue
@@ -16,7 +16,7 @@
   >
     <div class="flex items-center justify-between gap-2.5 min-w-0">
       <!-- Collapse/Expand Button -->
-      <div class="relative flex items-center gap-2.5 min-w-0 shrink-1 mr-auto">
+      <div class="relative flex items-center gap-2.5 min-w-0 shrink mr-auto">
         <div class="flex shrink-0 items-center px-0.5">
           <Button
             size="icon-sm"
@@ -69,7 +69,7 @@
         </span>
         <span
           v-if="badge.rest"
-          class="truncate -ml-2.5 grow-1 basis-0 bg-component-node-widget-background rounded-r-full max-w-max min-w-0"
+          class="truncate -ml-2.5 grow basis-0 bg-component-node-widget-background rounded-r-full max-w-max min-w-0"
         >
           <span class="pr-2" v-text="badge.rest" />
         </span>
diff --git a/src/renderer/extensions/vueNodes/components/NodeSlots.vue b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
index 3a4cb6a5d8..0a8b9e483b 100644
--- a/src/renderer/extensions/vueNodes/components/NodeSlots.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeSlots.vue
@@ -74,7 +74,7 @@ const unifiedWrapperClass = computed((): string =>
 const unifiedDotsClass = computed((): string =>
   cn(
     unified &&
-      'grid grid-cols-1 grid-rows-1 gap-0 [&>*]:row-span-full [&>*]:col-span-full place-items-center'
+      'grid grid-cols-1 grid-rows-1 gap-0 *:row-span-full *:col-span-full place-items-center'
   )
 )
 
diff --git a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
index 43a8e9f347..b469935f04 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/ValueControlPopover.vue
@@ -52,7 +52,7 @@ const controlMode = defineModel<ControlOptions>()
 
 <template>
   <div class="w-113 max-w-md p-4 space-y-4">
-    <div class="text-sm text-muted-foreground leading-tight">
+    <div class="text-sm/tight text-muted-foreground">
       {{ $t('widgets.valueControl.header.prefix') }}
       <span class="text-base-foreground font-medium">
         {{
@@ -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 shrink-0 bg-secondary-background border border-border-subtle"
+            class="flex items-center justify-center size-8 rounded-lg shrink-0 bg-secondary-background border border-border-subtle"
           >
             <i
               v-if="option.icon"
@@ -92,14 +92,12 @@ const controlMode = defineModel<ControlOptions>()
           </div>
 
           <div class="flex flex-col gap-0.5 min-w-0 flex-1">
-            <div class="text-sm font-normal text-base-foreground leading-tight">
+            <div class="text-sm/tight font-normal text-base-foreground">
               <span>
                 {{ $t(`widgets.valueControl.${option.title}`) }}
               </span>
             </div>
-            <div
-              class="text-sm font-normal text-muted-foreground leading-tight"
-            >
+            <div class="text-sm/tight font-normal text-muted-foreground">
               {{ $t(`widgets.valueControl.${option.description}`) }}
             </div>
           </div>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetChart.vue
index f6ca4d4b08..6efa95fa40 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-sm border p-4">
+    <div class="max-h-192 rounded-sm border p-4">
       <Chart
         :type="chartType"
         :data="chartData"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
index b23dac89eb..e3a163076e 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue
@@ -9,7 +9,7 @@
       <ColorPicker
         v-model="localValue"
         v-bind="filteredProps"
-        class="h-4 w-8 overflow-hidden !rounded-full border-none"
+        class="h-4 w-8 overflow-hidden rounded-full! border-none"
         :aria-label="widget.name"
         :pt="{
           preview: '!w-full !h-full !border-none'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue
index 2429bc31e1..a53f09f071 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetDOM.vue
@@ -44,7 +44,7 @@ whenever(() => !canvasStore.linearMode, mountWidgetElement)
 <template>
   <div
     ref="domEl"
-    class="flex flex-col [&>*]:flex-1"
+    class="flex flex-col *:flex-1"
     @pointerdown.stop
     @pointermove.stop
     @pointerup.stop
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
index e32acb7817..2cb49c533b 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetGalleria.vue
@@ -33,14 +33,14 @@
         />
       </template>
       <template #thumbnail="{ item }">
-        <div class="h-full w-full p-1">
+        <div class="size-full p-1">
           <img
             :src="item?.thumbnailImageSrc || item?.src || ''"
             :alt="
               item?.alt ||
               `${t('g.galleryThumbnail')} ${galleryImages.findIndex((img) => img === item) + 1} of ${galleryImages.length}`
             "
-            class="h-full w-full rounded-lg object-cover"
+            class="size-full rounded-lg object-cover"
           />
         </div>
       </template>
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
index b65c9bf423..8d12c47e7a 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue
@@ -104,7 +104,7 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 
 <template>
   <div
-    class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline outline-offset-[-1px] outline-node-component-border"
+    class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
   >
     <FormDropdownMenuFilter
       v-if="filterOptions.length > 0"
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
index d84e08ceb6..3151a63f8c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuFilter.vue
@@ -30,7 +30,7 @@ const singleFilterOption = computed(() => filterOptions.length === 1)
           !singleFilterOption &&
             'transition-all duration-150 hover:text-base-foreground hover:bg-interface-menu-component-surface-hovered cursor-pointer active:scale-95',
           !singleFilterOption && filterSelected === option.value
-            ? '!bg-interface-menu-component-surface-selected text-base-foreground'
+            ? 'bg-interface-menu-component-surface-selected! text-base-foreground'
             : 'bg-transparent'
         )
       "
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
index a82d05e7c2..eee59ca567 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue
@@ -77,7 +77,7 @@ function handleVideoLoad(event: Event) {
       :class="
         cn(
           'relative',
-          'w-full aspect-square overflow-hidden outline-1 outline-offset-[-1px] outline-interface-stroke',
+          'w-full aspect-square overflow-hidden outline-1 -outline-offset-1 outline-interface-stroke',
           'transition-[transform,box-shadow] duration-150',
           {
             'min-w-16 max-w-16 rounded-l-lg': layout === 'list',
@@ -93,7 +93,7 @@ function handleVideoLoad(event: Event) {
       <!-- Selected Icon -->
       <div
         v-if="selected"
-        class="absolute top-1 left-1 size-4 rounded-full border-1 border-base-foreground bg-primary-background"
+        class="absolute top-1 left-1 size-4 rounded-full border border-base-foreground bg-primary-background"
       >
         <i
           class="icon-[lucide--check] size-3 translate-y-[-0.5px] text-base-foreground bold"
@@ -117,7 +117,7 @@ function handleVideoLoad(event: Event) {
       />
       <div
         v-else
-        class="size-full bg-gradient-to-tr from-blue-400 via-teal-500 to-green-400"
+        class="size-full bg-linear-to-tr from-blue-400 via-teal-500 to-green-400"
       />
     </div>
     <!-- Name -->
@@ -135,7 +135,7 @@ function handleVideoLoad(event: Event) {
         v-tooltip="layout === 'grid' ? (label ?? name) : undefined"
         :class="
           cn(
-            'block text-xs line-clamp-2 break-words overflow-hidden',
+            'block text-xs line-clamp-2 wrap-break-word overflow-hidden',
             'transition-colors duration-150',
             // selection
             !!selected && 'text-base-foreground'
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 358b7fe156..811a57c336 100644
--- a/src/views/GraphView.vue
+++ b/src/views/GraphView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="comfyui-body grid h-full w-full overflow-hidden">
+  <div class="comfyui-body grid size-full overflow-hidden">
     <div id="comfyui-body-top" class="comfyui-body-top" />
     <div id="comfyui-body-bottom" class="comfyui-body-bottom" />
     <div id="comfyui-body-left" class="comfyui-body-left" />
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 6dec5543ef..810f8a22f9 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -75,7 +75,7 @@ const linearWorkflowRef = useTemplateRef('linearWorkflowRef')
 </script>
 <template>
   <MobileDisplay v-if="mobileDisplay" />
-  <div v-else class="absolute w-full h-full">
+  <div v-else class="absolute size-full">
     <div
       class="workflow-tabs-container pointer-events-auto h-(--workflow-tabs-height) w-full border-b border-interface-stroke shadow-interface"
     >
diff --git a/src/views/layouts/LayoutDefault.vue b/src/views/layouts/LayoutDefault.vue
index f993d82d55..fbc3f39021 100644
--- a/src/views/layouts/LayoutDefault.vue
+++ b/src/views/layouts/LayoutDefault.vue
@@ -1,6 +1,6 @@
 <template>
   <WorkspaceAuthGate>
-    <main class="relative h-full w-full overflow-hidden">
+    <main class="relative size-full overflow-hidden">
       <router-view />
     </main>
   </WorkspaceAuthGate>
diff --git a/src/workbench/extensions/manager/components/ManagerProgressToast.vue b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
index 69e05537af..f205920f4c 100644
--- a/src/workbench/extensions/manager/components/ManagerProgressToast.vue
+++ b/src/workbench/extensions/manager/components/ManagerProgressToast.vue
@@ -187,7 +187,7 @@ onBeforeUnmount(() => {
           >
             <template #header>
               <div class="flex w-full items-center justify-between py-2">
-                <div class="flex flex-col text-sm leading-normal font-medium">
+                <div class="flex flex-col text-sm/normal font-medium">
                   <span>{{ log.taskName }}</span>
                   <span class="text-muted">
                     {{
@@ -233,7 +233,7 @@ onBeforeUnmount(() => {
                   :key="logIndex"
                   class="text-muted"
                 >
-                  <pre class="break-words whitespace-pre-wrap">{{
+                  <pre class="wrap-break-word whitespace-pre-wrap">{{
                     logLine
                   }}</pre>
                 </div>
diff --git a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
index 0edb63f5ef..e5343f2019 100644
--- a/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
+++ b/src/workbench/extensions/manager/components/manager/ImportFailedNodeContent.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex w-[490px] flex-col border-t-1 border-border-default">
-    <div class="flex h-full w-full flex-col gap-4 p-4">
+  <div class="flex w-[490px] flex-col border-t border-border-default">
+    <div class="flex size-full flex-col gap-4 p-4">
       <!-- Error Details -->
       <div v-if="importFailedPackages.length > 0" class="flex flex-col gap-3">
         <div
diff --git a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
index 22e19a562d..879f98b035 100644
--- a/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
+++ b/src/workbench/extensions/manager/components/manager/ManagerDialog.vue
@@ -125,7 +125,7 @@
     </template>
 
     <template #content>
-      <div v-if="isLoading" class="scrollbar-hide h-full w-full overflow-auto">
+      <div v-if="isLoading" class="scrollbar-hide size-full overflow-auto">
         <GridSkeleton :grid-style="GRID_STYLE" :skeleton-card-count />
       </div>
       <NoResultsPlaceholder
@@ -133,7 +133,7 @@
         :title="emptyStateTitle"
         :message="emptyStateMessage"
       />
-      <div v-else class="h-full w-full" @click="handleGridContainerClick">
+      <div v-else class="size-full" @click="handleGridContainerClick">
         <VirtualGrid
           id="results-grid"
           :items="resultsWithKeys"
diff --git a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
index 9cf091ffcc..d53c51372a 100644
--- a/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
+++ b/src/workbench/extensions/manager/components/manager/NodeConflictDialogContent.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex w-138 flex-col">
     <ContentDivider :width="1" />
-    <div class="flex h-full w-full flex-col gap-2 px-4 py-6">
+    <div class="flex size-full flex-col gap-2 px-4 py-6">
       <!-- Description -->
       <div v-if="showAfterWhatsNew">
-        <p class="m-0 mb-4 text-sm leading-4 text-base-foreground">
+        <p class="m-0 mb-4 text-sm/4 text-base-foreground">
           {{ $t('manager.conflicts.description') }}
           <br /><br />
           {{ $t('manager.conflicts.info') }}
diff --git a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
index 25c9019e9b..5eb82d27ac 100644
--- a/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
+++ b/src/workbench/extensions/manager/components/manager/PackStatusMessage.vue
@@ -1,7 +1,7 @@
 <template>
   <Message
     :severity="statusSeverity"
-    class="flex w-fit items-center rounded-xl p-0 break-words"
+    class="flex w-fit items-center rounded-xl p-0 wrap-break-word"
     :pt="{
       text: { class: 'text-xs' },
       content: { class: 'px-2 py-0.5' }
diff --git a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
index 030820d882..39010a9e41 100644
--- a/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
+++ b/src/workbench/extensions/manager/components/manager/PackVersionSelectorPopover.vue
@@ -9,7 +9,7 @@
       v-if="isLoadingVersions || isQueueing"
       class="flex flex-col items-center py-4 text-center text-muted"
     >
-      <ProgressSpinner class="mb-2 h-8 w-8" />
+      <ProgressSpinner class="mb-2 size-8" />
       {{ $t('manager.loadingVersions') }}
     </div>
     <div v-else-if="versionOptions.length === 0" class="py-2">
diff --git a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
index 91cb65f93d..100388b29a 100644
--- a/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
+++ b/src/workbench/extensions/manager/components/manager/button/PackEnableToggle.vue
@@ -6,7 +6,7 @@
         value: $t('manager.conflicts.warningTooltip'),
         showDelay: 300
       }"
-      class="flex h-6 w-6 cursor-pointer items-center justify-center"
+      class="flex size-6 cursor-pointer items-center justify-center"
       @click="showConflictModal(true)"
     >
       <i
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
index df4b4b50a2..1b85b1c9fe 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/MarkdownText.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <div v-if="!hasMarkdown" class="break-words" v-text="text" />
-    <div v-else class="break-words">
+    <div v-if="!hasMarkdown" class="wrap-break-word" v-text="text" />
+    <div v-else class="wrap-break-word">
       <template v-for="(segment, index) in parsedSegments" :key="index">
         <a
           v-if="segment.type === 'link' && 'url' in segment"
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
index 3bc1ca3c57..5ba39872d4 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/DescriptionTabPanel.vue
@@ -47,7 +47,7 @@
       <div
         v-for="(dep, index) in nodePack.latest_version.dependencies"
         :key="index"
-        class="break-words text-muted-foreground"
+        class="wrap-break-word text-muted-foreground"
       >
         {{ dep }}
       </div>
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 e495dce279..764ca6ef15 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/WarningTabPanel.vue
@@ -19,7 +19,7 @@
 
       <!-- Other conflict types use standard message -->
       <template v-else>
-        <div class="text-sm break-words">
+        <div class="text-sm wrap-break-word">
           {{ getConflictMessage(conflict, $t) }}
         </div>
       </template>
diff --git a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
index 797071ec93..6080e93343 100644
--- a/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
+++ b/src/workbench/extensions/manager/components/manager/packBanner/PackBanner.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="aspect-7/3 w-full overflow-hidden z-0">
     <!-- default banner show -->
-    <div v-if="showDefaultBanner" class="h-full w-full">
+    <div v-if="showDefaultBanner" class="size-full">
       <img
         :src="DEFAULT_BANNER"
         :alt="$t('g.defaultBanner')"
-        class="h-full w-full object-cover"
+        class="size-full object-cover"
       />
     </div>
     <!-- banner_url or icon show -->
-    <div v-else class="relative h-full w-full">
+    <div v-else class="relative size-full">
       <!-- blur background -->
       <div
         v-if="imgSrc"
@@ -25,8 +25,8 @@
         :alt="nodePack.name + ' banner'"
         :class="
           isImageError
-            ? 'relative w-full h-full object-cover z-10'
-            : 'relative w-full h-full object-contain z-10'
+            ? 'relative size-full object-cover z-10'
+            : 'relative size-full object-contain z-10'
         "
         @error="isImageError = true"
       />
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
index 5555e56c73..196b229696 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCard.vue
@@ -17,8 +17,8 @@
 
     <!-- Content -->
     <div class="flex flex-1 flex-col rounded-lg min-h-0">
-      <div class="h-full w-full py-2 px-3">
-        <div class="flex h-full w-full flex-col gap-y-1">
+      <div class="size-full py-2 px-3">
+        <div class="flex size-full flex-col gap-y-1">
           <span
             class="truncate overflow-hidden text-xs font-bold text-ellipsis"
           >
@@ -26,7 +26,7 @@
           </span>
           <p
             v-if="nodePack.description"
-            class="my-0 mb-1 line-clamp-3 min-h-12 flex-1 overflow-hidden text-xs leading-4 font-medium break-words text-muted"
+            class="my-0 mb-1 line-clamp-3 min-h-12 flex-1 overflow-hidden text-xs/4 font-medium wrap-break-word text-muted"
           >
             {{ nodePack.description }}
           </p>
@@ -51,7 +51,7 @@
             <div class="flex">
               <span
                 v-if="publisherName"
-                class="max-w-40 truncate text-xs leading-3 font-medium text-muted"
+                class="max-w-40 truncate text-xs/3 font-medium text-muted"
               >
                 {{ publisherName }}
               </span>
diff --git a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
index 52f7a412fa..095e3865e9 100644
--- a/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
+++ b/src/workbench/extensions/manager/components/manager/packCard/PackCardFooter.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex min-h-12 items-center justify-between px-4 py-2 text-xs leading-3 font-medium text-muted"
+    class="flex min-h-12 items-center justify-between px-4 py-2 text-xs/3 font-medium text-muted"
   >
     <div v-if="nodePack.downloads" class="flex items-center gap-1.5">
       <i class="pi pi-download text-muted"></i>
diff --git a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
index 24e0180d88..8808d2bce0 100644
--- a/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
+++ b/src/workbench/extensions/manager/components/manager/skeleton/PackCardSkeleton.vue
@@ -6,7 +6,7 @@
     <!-- Card header - flush with top, approximately 15% of height -->
     <div class="flex w-full items-center justify-between px-4 py-3">
       <div class="flex items-center">
-        <div class="flex h-6 w-6 items-center justify-center">
+        <div class="flex size-6 items-center justify-center">
           <Skeleton shape="circle" width="1.5rem" height="1.5rem" />
         </div>
         <Skeleton width="5rem" height="1rem" class="ml-2" />