From 099e1e7c084d8ef7e86d08c776deb881366b2c11 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 5 Jun 2023 16:43:18 +1000
Subject: [PATCH] feat(ui): fix image fit

- Prevent init, current & control images from overflowing
---
 .../controlNet/components/ControlNetImagePreview.tsx         | 5 ++++-
 .../src/features/gallery/components/CurrentImageDisplay.tsx  | 1 +
 .../Parameters/ImageToImage/InitialImagePreview.tsx          | 3 ++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
index 632f88b57b..b4ed2c254e 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
@@ -60,7 +60,10 @@ const ControlNetImagePreview = (props: Props) => {
     processorType !== 'none';
 
   return (
-    <Box ref={containerRef} sx={{ position: 'relative', w: 'full', h: 'full' }}>
+    <Box
+      ref={containerRef}
+      sx={{ position: 'relative', w: 'full', h: 'full', aspectRatio: '1/1' }}
+    >
       <IAIDndImage
         image={controlImage}
         onDrop={handleDrop}
diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
index e4e50e6c5d..b5e8c22268 100644
--- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
@@ -51,6 +51,7 @@ const CurrentImageDisplay = () => {
           alignItems: 'center',
           justifyContent: 'center',
           gap: 4,
+          position: 'absolute',
         }}
       >
         <CurrentImagePreview />
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 a1c4d5acab..72dec6c149 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
@@ -72,9 +72,10 @@ const InitialImagePreview = () => {
       sx={{
         width: 'full',
         height: 'full',
-        position: 'relative',
+        position: 'absolute',
         alignItems: 'center',
         justifyContent: 'center',
+        p: 4,
       }}
     >
       <IAIDndImage