From 2bdb65537595a47d9b313d243edba27282af3cf4 Mon Sep 17 00:00:00 2001
From: mickr777 <115216705+mickr777@users.noreply.github.com>
Date: Fri, 2 Jun 2023 14:59:10 +1000
Subject: [PATCH] Change to absolute

---
 .../ProcessButtons/InvokeButton.tsx           | 78 +++++++++++--------
 1 file changed, 46 insertions(+), 32 deletions(-)

diff --git a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
index 9efebf7ef2..963581d2fe 100644
--- a/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/ProcessButtons/InvokeButton.tsx
@@ -45,38 +45,52 @@ export default function InvokeButton(props: InvokeButton) {
 
   return (
     <Box style={{ flexGrow: 4 }} position="relative">
-      {iconButton ? (
-        <IAIIconButton
-          aria-label={t('parameters.invoke')}
-          type="submit"
-          icon={<FaPlay />}
-          isDisabled={!isReady}
-          onClick={handleInvoke}
-          flexGrow={1}
-          w="100%"
-          tooltip={t('parameters.invoke')}
-          tooltipProps={{ placement: 'bottom' }}
-          colorScheme="accent"
-          id="invoke-button"
-          {...rest}
-        />
-      ) : (
-        <IAIButton
-          aria-label={t('parameters.invoke')}
-          type="submit"
-          isDisabled={!isReady}
-          onClick={handleInvoke}
-          flexGrow={1}
-          w="100%"
-          colorScheme="accent"
-          id="invoke-button"
-          fontWeight={700}
-          {...rest}
-        >
-          Invoke
-        </IAIButton>
-      )}
-      {!isReady && <ProgressBar />}
+      <Box style={{ position: 'relative' }}>
+        {iconButton ? (
+          <IAIIconButton
+            aria-label={t('parameters.invoke')}
+            type="submit"
+            icon={<FaPlay />}
+            isDisabled={!isReady}
+            onClick={handleInvoke}
+            flexGrow={1}
+            w="100%"
+            tooltip={t('parameters.invoke')}
+            tooltipProps={{ placement: 'bottom' }}
+            colorScheme="accent"
+            id="invoke-button"
+            {...rest}
+          />
+        ) : (
+          <IAIButton
+            aria-label={t('parameters.invoke')}
+            type="submit"
+            isDisabled={!isReady}
+            onClick={handleInvoke}
+            flexGrow={1}
+            w="100%"
+            colorScheme="accent"
+            id="invoke-button"
+            fontWeight={700}
+            {...rest}
+          >
+            Invoke
+          </IAIButton>
+        )}
+        {!isReady && (
+          <Box
+            style={{
+              position: 'absolute',
+              bottom: '0',
+              left: '0',
+              right: '0',
+              zIndex: 1,
+            }}
+          >
+            <ProgressBar />
+          </Box>
+        )}
+      </Box>
     </Box>
   );
 }