Perfectly align inline progress

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>

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(
-  () =>
+  () => !hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
-    !props.hidden && (totalPercent.value > 0 || currentNodePercent.value > 0)
 )
 </script>