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)
This commit is contained in:
Christian Byrne
2026-03-05 17:07:46 -08:00
committed by GitHub
parent 1bac5d9bdd
commit 1221756e05
174 changed files with 344 additions and 385 deletions

View File

@@ -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>

View File

@@ -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

View File

@@ -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"

View File

@@ -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'

View File

@@ -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 }}

View File

@@ -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"

View File

@@ -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"