fix: Status indicator and close button appearing together (#5738)

## Summary

Small fix for the close/status visibility overlap

<img width="392" height="128" alt="image"
src="https://github.com/user-attachments/assets/af25f1d7-a8c3-4155-9123-9fa10724e8db"
/>

![20250923-2140-26
4569642](https://github.com/user-attachments/assets/e1b00a3f-d6e9-416b-9014-df0f9241082e)

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5738-fix-Status-indicator-and-close-button-appearing-together-2776d73d3650813e9601e519c8a85043)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-09-23 15:23:00 -07:00
committed by GitHub
parent e4022c455a
commit f7f3240100
5 changed files with 7 additions and 23 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 88 KiB

After

Width:  |  Height:  |  Size: 88 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 29 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 54 KiB

View File

@@ -1,7 +1,7 @@
<template>
<div
ref="workflowTabRef"
class="flex p-2 gap-2 workflow-tab"
class="flex p-2 gap-2 workflow-tab group"
v-bind="$attrs"
@mouseenter="handleMouseEnter"
@mouseleave="handleMouseLeave"
@@ -11,9 +11,13 @@
{{ workflowOption.workflow.filename }}
</span>
<div class="relative">
<span v-if="shouldShowStatusIndicator" class="status-indicator"></span>
<span
v-if="shouldShowStatusIndicator"
class="group-hover:hidden absolute font-bold text-2xl top-1/2 left-1/2 -translate-1/2 z-10 bg-(--comfy-menu-secondary-bg) w-4"
></span
>
<Button
class="close-button p-0 w-auto"
class="close-button p-0 w-auto invisible"
icon="pi pi-times"
text
severity="secondary"
@@ -174,18 +178,6 @@ onUnmounted(() => {
})
</script>
<style scoped>
@reference '../../assets/css/style.css';
.status-indicator {
@apply absolute font-bold;
font-size: 1.5rem;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<style>
.p-tooltip.workflow-tab-tooltip {
z-index: 1200 !important;

View File

@@ -358,14 +358,6 @@ onUpdated(() => {
@apply visible;
}
:deep(.p-togglebutton:hover) .status-indicator {
@apply hidden;
}
:deep(.p-togglebutton) .close-button {
@apply invisible;
}
:deep(.p-scrollpanel-content) {
@apply h-full;
}