fix(ui): prevent canvas & main panel content from scrolling

Hopefully fixes issues where, when run via the launcher, the main panel kinda just scrolls out of bounds.
invoke-ai · Jan 8, 2025 · 89b576f · 89b576f
1 parent d7893a5
commit 89b576f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasMainPanelContent.tsx
@@ -57,6 +57,7 @@ export const CanvasMainPanelContent = memo(() => {
       gap={2}
       alignItems="center"
       justifyContent="center"
+      overflow="hidden"
     >
       <CanvasManagerProviderGate>
         <CanvasToolbar />
@@ -70,6 +71,7 @@ export const CanvasMainPanelContent = memo(() => {
             h="full"
             bg={dynamicGrid ? 'base.850' : 'base.900'}
             borderRadius="base"
+            overflow="hidden"
           >
             <InvokeCanvasComponent />
             <CanvasManagerProviderGate>

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
@@ -46,6 +46,7 @@ export const ImageViewer = memo(({ closeButton }: Props) => {
       left={0}
       alignItems="center"
       justifyContent="center"
+      overflow="hidden"
     >
       {hasImageToCompare && <CompareToolbar />}
       {!hasImageToCompare && <ViewerToolbar closeButton={closeButton} />}

diff --git a/invokeai/frontend/web/src/features/ui/components/AppContent.tsx b/invokeai/frontend/web/src/features/ui/components/AppContent.tsx
@@ -117,7 +117,7 @@ export const AppContent = memo(() => {
   });
 
   return (
-    <Flex id="invoke-app-tabs" w="full" h="full" gap={4} p={4}>
+    <Flex id="invoke-app-tabs" w="full" h="full" gap={4} p={4} overflow="hidden">
       <VerticalNavBar />
       <PanelGroup
         ref={imperativePanelGroupRef}