refactor: standardize z-index Tailwind classes (#7509)

## Summary

Replace arbitrary z-index values (z-[n]) with standard Tailwind
utilities.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7499

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7509-refactor-standardize-z-index-Tailwind-classes-2ca6d73d365081339e66f0c8e6fcc20b)
by [Unito](https://www.unito.io)
This commit is contained in:
Terry Jia
2025-12-15 15:09:11 -05:00
committed by GitHub
parent 38eaf4b30e
commit fb944fef56
4 changed files with 6 additions and 6 deletions

View File

@@ -10,7 +10,7 @@
></div> ></div>
<ButtonGroup <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-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
:style="{ :style="{
...stringifiedMinimapStyles.buttonGroupStyles ...stringifiedMinimapStyles.buttonGroupStyles
}" }"

View File

@@ -8,7 +8,7 @@
unstyled unstyled
:pt="{ :pt="{
root: { root: {
class: 'absolute z-[60]' class: 'absolute z-60'
}, },
content: { content: {
class: [ class: [

View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="h-full z-[8888] flex flex-col justify-between bg-comfy-menu-bg"> <div class="h-full z-8888 flex flex-col justify-between bg-comfy-menu-bg">
<div class="flex flex-col"> <div class="flex flex-col">
<div <div
v-for="tool in allTools" v-for="tool in allTools"

View File

@@ -67,7 +67,7 @@
/> />
</div> </div>
<div class="relative z-[1] flex items-center gap-1"> <div class="relative z-1 flex items-center gap-1">
<div class="relative inline-flex items-center justify-center"> <div class="relative inline-flex items-center justify-center">
<div <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-x-1/2 -translate-y-1/2"
@@ -90,7 +90,7 @@
</div> </div>
</div> </div>
<div class="relative z-[1] min-w-0 flex-1"> <div class="relative z-1 min-w-0 flex-1">
<div class="truncate opacity-90" :title="props.title"> <div class="truncate opacity-90" :title="props.title">
<slot name="primary">{{ props.title }}</slot> <slot name="primary">{{ props.title }}</slot>
</div> </div>
@@ -113,7 +113,7 @@
This would eliminate the current duplication where the cancel button exists This would eliminate the current duplication where the cancel button exists
both outside (for running) and inside (for pending) the Transition. both outside (for running) and inside (for pending) the Transition.
--> -->
<div class="relative z-[1] flex items-center gap-2 text-text-secondary"> <div class="relative z-1 flex items-center gap-2 text-text-secondary">
<Transition <Transition
mode="out-in" mode="out-in"
enter-active-class="transition-opacity transition-transform duration-150 ease-out" enter-active-class="transition-opacity transition-transform duration-150 ease-out"