From c1808db7c4f36ab73bd53ccb6789c2c06c33ae5f Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Thu, 11 Dec 2025 22:31:25 -0800
Subject: [PATCH] Fix/run button floating calc (#7340)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Ensures the undocked ComfyRunButton resets to a valid position when the
app reopens after a browser resize. Since the component is dynamically
imported, we defer setInitialPosition until the suspense boundary has
been resolved rather than calling it on mount (when the import has not
been loaded / wxh are incorrect).

## Changes

- **What**:  ComfyActionbar.vue
- **Breaking**: <!-- Any breaking changes (if none, remove this line)
-->
- **Dependencies**: <!-- New dependencies (if none, remove this line)
-->

Fixes:
https://www.notion.so/comfy-org/Bug-Run-button-missing-after-undocking-moving-to-bottom-right-and-resizing-window-2c06d73d3650810f89e5eb5692f08b83?source=copy_link

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7340-Fix-run-button-floating-calc-2c66d73d36508122b489c90c81c6129a)
by [Unito](https://www.unito.io)
---
 src/components/actionbar/ComfyActionbar.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/actionbar/ComfyActionbar.vue b/src/components/actionbar/ComfyActionbar.vue
index b2e31ea67..d9d230361 100644
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -28,8 +28,9 @@
             )
           "
         />
-
-        <ComfyRunButton />
+        <Suspense @resolve="comfyRunButtonResolved">
+          <ComfyRunButton />
+        </Suspense>
         <IconButton
           v-tooltip.bottom="cancelJobTooltipConfig"
           type="transparent"
@@ -56,7 +57,7 @@ import {
 import { clamp } from 'es-toolkit/compat'
 import { storeToRefs } from 'pinia'
 import Panel from 'primevue/panel'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 
 import IconButton from '@/components/button/IconButton.vue'
 import { buildTooltipConfig } from '@/composables/useTooltipConfig'
@@ -139,7 +140,14 @@ const setInitialPosition = () => {
     }
   }
 }
-onMounted(setInitialPosition)
+
+//The ComfyRunButton is a dynamic import. Which means it will not be loaded onMount in this component.
+//So we must use suspense resolve to ensure that is has loaded and updated the DOM before calling setInitialPosition()
+async function comfyRunButtonResolved() {
+  await nextTick()
+  setInitialPosition()
+}
+
 watch(visible, async (newVisible) => {
   if (newVisible) {
     await nextTick(setInitialPosition)