From f9384be59b80ddb75f8cd9ddb7f822f92a2cdd51 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 11 May 2023 13:49:07 +1000
Subject: [PATCH] fix(ui): fix init image causing overflow

---
 .../components/CurrentImagePreview.tsx        | 10 ++-
 .../ImageToImage/InitialImagePreview.tsx      | 66 ++++++++-----------
 2 files changed, 33 insertions(+), 43 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
index a0fbd7c5d1..18fe166cd8 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Skeleton, useBoolean } from '@chakra-ui/react';
+import { Box, Flex, Image } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useGetUrl } from 'common/util/getUrl';
@@ -50,8 +50,6 @@ const CurrentImagePreview = () => {
   } = useAppSelector(imagesSelector);
   const { getUrl } = useGetUrl();
 
-  const [isLoaded, { on, off }] = useBoolean();
-
   const handleDragStart = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
       if (!image) {
@@ -67,11 +65,11 @@ const CurrentImagePreview = () => {
   return (
     <Flex
       sx={{
-        position: 'relative',
-        justifyContent: 'center',
-        alignItems: 'center',
         width: '100%',
         height: '100%',
+        position: 'relative',
+        alignItems: 'center',
+        justifyContent: 'center',
       }}
     >
       {progressImage && shouldShowProgressInViewer ? (
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
index fbb833a14a..757957934e 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
@@ -62,48 +62,40 @@ const InitialImagePreview = () => {
       sx={{
         width: 'full',
         height: 'full',
+        position: 'relative',
         alignItems: 'center',
         justifyContent: 'center',
-        position: 'relative',
       }}
       onDrop={handleDrop}
     >
-      <Flex
-        sx={{
-          height: 'full',
-          width: 'full',
-          blur: '5px',
-          position: 'relative',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        {initialImage?.url && (
-          <>
-            <Image
-              sx={{
-                objectFit: 'contain',
-                borderRadius: 'base',
-                maxHeight: 'full',
-              }}
-              src={getUrl(initialImage?.url)}
-              onError={onError}
-              onLoad={() => {
-                setIsLoaded(true);
-              }}
-              fallback={
-                <Flex
-                  sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }}
-                >
-                  <Spinner color="grey" w="5rem" h="5rem" />
-                </Flex>
-              }
-            />
-            {isLoaded && <ImageToImageOverlay image={initialImage} />}
-          </>
-        )}
-        {!initialImage?.url && <SelectImagePlaceholder />}
-      </Flex>
+      {initialImage?.url && (
+        <>
+          <Image
+            sx={{
+              objectFit: 'contain',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              height: 'auto',
+              position: 'absolute',
+              borderRadius: 'base',
+            }}
+            src={getUrl(initialImage?.url)}
+            onError={onError}
+            onLoad={() => {
+              setIsLoaded(true);
+            }}
+            fallback={
+              <Flex
+                sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }}
+              >
+                <Spinner color="grey" w="5rem" h="5rem" />
+              </Flex>
+            }
+          />
+          {isLoaded && <ImageToImageOverlay image={initialImage} />}
+        </>
+      )}
+      {!initialImage?.url && <SelectImagePlaceholder />}
     </Flex>
   );
 };