fix(ui): fix init image causing overflow

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 ? (

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -62,29 +62,22 @@ 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',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              height: 'auto',
+              position: 'absolute',
               borderRadius: 'base',
-                maxHeight: 'full',
             }}
             src={getUrl(initialImage?.url)}
             onError={onError}
@@ -104,7 +97,6 @@ const InitialImagePreview = () => {
       )}
       {!initialImage?.url && <SelectImagePlaceholder />}
     </Flex>
-    </Flex>
   );
 };