From 230772d350f8a361d984411265b2b1e72046903e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 25 Mar 2025 06:06:57 +1000
Subject: [PATCH] fix(ui): restore `display: flex` to image viewer and node
 editor

This was inadventently removed in #7786 and caused some minor layout overflow.
---
 .../features/gallery/components/ImageViewer/ImageViewer.tsx    | 3 ++-
 .../frontend/web/src/features/nodes/components/NodeEditor.tsx  | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
index b5ccbca9c12..5f080d1ab6a 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -26,6 +26,7 @@ const useFocusRegionOptions = {
 };
 
 const FOCUS_REGION_STYLES: SystemStyleObject = {
+  display: 'flex',
   width: 'full',
   height: 'full',
   position: 'absolute',
@@ -45,7 +46,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
     <FocusRegionWrapper region="viewer" sx={FOCUS_REGION_STYLES} layerStyle="first" {...useFocusRegionOptions}>
       {hasImageToCompare && <CompareToolbar />}
       {!hasImageToCompare && <ViewerToolbar closeButton={closeButton} />}
-      <Box ref={containerRef} w="full" h="full" p={2}>
+      <Box ref={containerRef} w="full" h="full" p={2} overflow="hidden">
         {!hasImageToCompare && <CurrentImagePreview />}
         {hasImageToCompare && <ImageComparison containerDims={containerDims} />}
       </Box>
diff --git a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
index e7210b612c9..02e2abeadc1 100644
--- a/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
@@ -14,6 +14,7 @@ import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
 import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
 
 const FOCUS_REGION_STYLES: SystemStyleObject = {
+  display: 'flex',
   position: 'relative',
   width: 'full',
   height: 'full',