Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-03-07 22:20:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
## 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
Download Patch File Download Diff File Expand all files Collapse all files

4
eslint.config.ts
View File

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

6
src/components/LiteGraphCanvasSplitterOverlay.vue
View File

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

2
src/components/TopMenuSection.vue
View File

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

7
src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
View File

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

2
src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
View File

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

2
src/components/breadcrumb/SubgraphBreadcrumb.vue
View File

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

2
src/components/breadcrumb/SubgraphBreadcrumbItem.vue
View File

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

2
src/components/builder/AppBuilder.vue
View File

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

4
src/components/builder/BuilderDialog.vue
View File

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

6
src/components/builder/ConnectOutputPopover.vue
View File

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

2
src/components/card/CardTop.vue
View File

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

2
src/components/common/DropdownItem.vue
View File

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

2
src/components/common/DropdownMenu.vue
View File

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

2
src/components/common/FormImageUpload.vue
View File

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

2
src/components/common/LazyImage.vue
View File

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

4
src/components/common/MarqueeLine.vue
View File

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

2
src/components/common/TreeExplorerV2.vue
View File

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

6
src/components/common/WorkflowActionsList.vue
View File

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

16
src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
View File

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

2
src/components/dialog/confirm/ConfirmBody.vue
View File

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

6
src/components/dialog/content/ConfirmationDialogContent.vue
View File

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

4
src/components/dialog/content/ErrorDialogContent.vue
View File

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

2
src/components/dialog/content/MissingCoreNodesMessage.vue
View File

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

16
src/components/dialog/content/MissingModelsContent.vue
View File

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

2
src/components/dialog/content/MissingModelsFooter.vue
View File

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

12
src/components/dialog/content/MissingNodesContent.vue
View File

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

2
src/components/dialog/content/MissingNodesFooter.vue
View File

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

4
src/components/dialog/content/SignInContent.vue
View File

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

4
src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue
View File

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

2
src/components/dialog/content/setting/UserPanel.vue
View File

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

2
src/components/dialog/content/signin/ApiKeyForm.vue
View File

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

2
src/components/dialog/content/signin/SignInForm.vue
View File

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

2
src/components/dialog/content/signin/SignUpForm.vue
View File

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

4
src/components/dialog/content/subscription/CancelSubscriptionDialogContent.vue
View File

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

4
src/components/error/ErrorOverlay.vue
View File

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

2
src/components/gradientslider/GradientSlider.vue
View File

@@ -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%)' }"

8
src/components/graph/CanvasModeSelector.vue
View File

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

4
src/components/graph/GraphCanvas.vue
View File

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

16
src/components/graph/GraphCanvasMenu.vue
View File

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

2
src/components/graph/selectionToolbox/ColorPickerMenu.vue
View File

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

4
src/components/graph/widgets/DomWidget.vue
View File

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

4
src/components/helpcenter/HelpCenterMenuContent.vue
View File

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

4
src/components/imagecrop/WidgetImageCrop.vue
View File

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

4
src/components/input/MultiSelect.vue
View File

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

2
src/components/load3d/Load3DScene.vue
View File

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

2
src/components/load3d/Load3dViewerContent.vue
View File

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

4
src/components/load3d/controls/SceneControls.vue
View File

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

4
src/components/maskeditor/BrushSettingsPanel.vue
View File

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

4
src/components/maskeditor/ColorSelectSettingsPanel.vue
View File

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

12
src/components/maskeditor/ImageLayerSettingsPanel.vue
View File

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

12
src/components/maskeditor/MaskEditorContent.vue
View File

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

4
src/components/maskeditor/PaintBucketSettingsPanel.vue
View File

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

4
src/components/maskeditor/SidePanel.vue
View File

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

2
src/components/maskeditor/controls/DropdownControl.vue
View File

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

2
src/components/maskeditor/controls/SliderControl.vue
View File

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

2
src/components/maskeditor/controls/ToggleControl.vue
View File

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

12
src/components/maskeditor/dialog/TopBarHeader.vue
View File

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

4
src/components/painter/WidgetPainter.vue
View File

@@ -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]'
)
"

4
src/components/queue/JobHistoryActionsMenu.vue
View File

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

2
src/components/queue/QueueOverlayActive.vue
View File

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

6
src/components/queue/dialogs/QueueClearHistoryDialog.vue
View File

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

2
src/components/queue/job/JobContextMenu.vue
View File

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

28
src/components/queue/job/JobDetailsPopover.vue
View File

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

4
src/components/queue/job/JobFilterActions.vue
View File

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

6
src/components/queue/job/QueueAssetPreview.vue
View File

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

6
src/components/queue/job/QueueJobItem.vue
View File

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

4
src/components/rightSidePanel/errors/ErrorNodeCard.vue
View File

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

4
src/components/rightSidePanel/errors/MissingNodeCard.vue
View File

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

8
src/components/rightSidePanel/errors/MissingPackGroupRow.vue
View File

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

2
src/components/rightSidePanel/errors/TabErrors.vue
View File

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

4
src/components/rightSidePanel/parameters/WidgetItem.vue
View File

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

2
src/components/rightSidePanel/settings/LayoutField.vue
View File

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

2
src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
View File

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

2
src/components/sidebar/ComfyMenuButton.vue
View File

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

2
src/components/sidebar/SideToolbar.vue
View File

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

2
src/components/sidebar/tabs/AssetsSidebarGridView.vue
View File

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

2
src/components/sidebar/tabs/AssetsSidebarListView.vue
View File

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

4
src/components/sidebar/tabs/NodeLibrarySidebarTabV2.vue
View File

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

2
src/components/sidebar/tabs/SidebarTabTemplate.vue
View File

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

2
src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
View File

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

2
src/components/sidebar/tabs/nodeLibrary/EssentialNodeCard.vue
View File

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

2
src/components/sidebar/tabs/nodeLibrary/NodeDragPreview.vue
View File

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

2
src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
View File

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

2
src/components/templates/thumbnails/AudioThumbnail.vue
View File

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

6
src/components/templates/thumbnails/BaseThumbnail.vue
View File

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

2
src/components/templates/thumbnails/HoverDissolveThumbnail.vue
View File

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

2
src/components/templates/thumbnails/LogoOverlay.vue
View File

@@ -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` } : {}

4
src/components/ui/search-input/searchInput.variants.ts
View File

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

2
src/components/ui/select/SelectItem.vue
View File

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

2
src/components/ui/select/SelectTrigger.vue
View File

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

2
src/components/ui/slider/Slider.vue
View File

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

2
src/components/ui/tags-input/TagsInputItemDelete.vue
View File

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

4
src/components/widget/SampleModelSelector.vue
View File

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

2
src/components/widget/layout/BaseModalLayout.vue
View File

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

2
src/platform/assets/components/AssetBrowserModal.vue
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>

2
src/platform/assets/components/AssetCard.vue
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

2
src/platform/assets/components/AssetExportProgressDialog.vue
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"

2
src/platform/assets/components/MediaAssetFilterMenu.vue
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'

2
src/platform/assets/components/MediaTitle.vue
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 }}

2
src/platform/assets/components/ModelImportProgressDialog.vue
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"

Some files were not shown because too many files have changed in this diff Show More