From fb944fef5668ae22aaa88fa2b9f60b93d4b8001f Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Mon, 15 Dec 2025 15:09:11 -0500
Subject: [PATCH] refactor: standardize z-index Tailwind classes (#7509)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 src/components/graph/GraphCanvasMenu.vue                 | 2 +-
 src/components/graph/selectionToolbox/SubmenuPopover.vue | 2 +-
 src/components/maskeditor/ToolPanel.vue                  | 2 +-
 src/components/queue/job/QueueJobItem.vue                | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/graph/GraphCanvasMenu.vue b/src/components/graph/GraphCanvasMenu.vue
index acc670814..45106e1d9 100644
--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -10,7 +10,7 @@
     ></div>
 
     <ButtonGroup
-      class="absolute right-0 bottom-0 z-[1200] flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
+      class="absolute right-0 bottom-0 z-1200 flex-row gap-1 border-[1px] border-interface-stroke bg-comfy-menu-bg p-2"
       :style="{
         ...stringifiedMinimapStyles.buttonGroupStyles
       }"
diff --git a/src/components/graph/selectionToolbox/SubmenuPopover.vue b/src/components/graph/selectionToolbox/SubmenuPopover.vue
index 036c035c7..eca2cd20f 100644
--- a/src/components/graph/selectionToolbox/SubmenuPopover.vue
+++ b/src/components/graph/selectionToolbox/SubmenuPopover.vue
@@ -8,7 +8,7 @@
     unstyled
     :pt="{
       root: {
-        class: 'absolute z-[60]'
+        class: 'absolute z-60'
       },
       content: {
         class: [
diff --git a/src/components/maskeditor/ToolPanel.vue b/src/components/maskeditor/ToolPanel.vue
index 9cbb17b28..89c8001f7 100644
--- a/src/components/maskeditor/ToolPanel.vue
+++ b/src/components/maskeditor/ToolPanel.vue
@@ -1,5 +1,5 @@
 <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
         v-for="tool in allTools"
diff --git a/src/components/queue/job/QueueJobItem.vue b/src/components/queue/job/QueueJobItem.vue
index 8bf4614df..afc603c17 100644
--- a/src/components/queue/job/QueueJobItem.vue
+++ b/src/components/queue/job/QueueJobItem.vue
@@ -67,7 +67,7 @@
         />
       </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="absolute left-1/2 top-1/2 size-10 -translate-x-1/2 -translate-y-1/2"
@@ -90,7 +90,7 @@
         </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">
           <slot name="primary">{{ props.title }}</slot>
         </div>
@@ -113,7 +113,7 @@
         This would eliminate the current duplication where the cancel button exists
         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
           mode="out-in"
           enter-active-class="transition-opacity transition-transform duration-150 ease-out"