fix: enable enforce-canonical-classes tailwind lint rule (#9427)

## 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)
2026-04-27 01:39:47 +00:00 · 2026-03-05 17:07:46 -08:00
parent 1bac5d9bdd
commit 1221756e05
174 changed files with 344 additions and 385 deletions
--- 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>
--- 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
--- 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"
--- 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'
--- 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 }}
--- 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"
--- 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"
--- 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') }}
--- 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"
          >
--- 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"
          >
--- 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"
--- 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>

--- 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"
--- 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
--- 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" />
--- 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')"
        >
          {{
--- 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
--- 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')
--- 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"
    >
--- 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"
--- 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',
--- 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"
--- 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
--- 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">
--- 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">
--- 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"
--- 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>
--- 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
--- 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'"
--- 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"
--- 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"
--- 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'
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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">