From aef4ddb5ccce1116e71030c97240338bbf59ac97 Mon Sep 17 00:00:00 2001
From: Benjamin Lu <benjaminlu1107@gmail.com>
Date: Fri, 23 Jan 2026 03:50:43 -0800
Subject: [PATCH] Perfectly align inline progress

---
 src/components/actionbar/ComfyActionbar.vue  |  1 +
 src/components/queue/QueueInlineProgress.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index 52cc439b8..bd73eef3d 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -48,6 +48,7 @@
     <Teleport v-if="inlineProgressTarget" :to="inlineProgressTarget">
       <QueueInlineProgress
         :hidden="queueOverlayExpanded"
+        :radius-class="cn(isDocked ? 'rounded-[7px]' : 'rounded-[5px]')"
         data-testid="queue-inline-progress"
       />
     </Teleport>
diff --git a/src/components/queue/QueueInlineProgress.vue b/src/components/queue/QueueInlineProgress.vue
index 0e5842941..e591e50d2 100644
--- a/src/components/queue/QueueInlineProgress.vue
+++ b/src/components/queue/QueueInlineProgress.vue
@@ -2,7 +2,9 @@
   <div
     v-if="shouldShow"
     aria-hidden="true"
-    class="pointer-events-none absolute inset-0 overflow-hidden rounded-[7px]"
+    :class="
+      cn('pointer-events-none absolute inset-0 overflow-hidden', radiusClass)
+    "
   >
     <div
       class="pointer-events-none absolute bottom-0 left-0 h-[3px] bg-interface-panel-job-progress-primary transition-[width]"
@@ -19,15 +21,16 @@
 import { computed } from 'vue'
 
 import { useQueueProgress } from '@/composables/queue/useQueueProgress'
+import { cn } from '@/utils/tailwindUtil'
 
-const props = defineProps<{
+const { hidden = false, radiusClass = 'rounded-[7px]' } = defineProps<{
   hidden?: boolean
+  radiusClass?: string
 }>()
 
 const { totalPercent, currentNodePercent } = useQueueProgress()
 
 const shouldShow = computed(
-  () =>
-    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
+  () => !hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
 )
 </script>