From 9c931d9ca0349dce5b35eee5828a8be490b2e24e Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Jun 2024 17:38:21 +1000
Subject: [PATCH] fix(ui): gallery content overflow

This is one of those unexpected CSS quirks. Flex containers need min-width or min-height for their children to not overflow. Add `minH={0}` to gallery container.
---
 .../web/src/features/gallery/components/ImageGalleryContent.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 2354423210..62d54be40f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -44,7 +44,7 @@ const ImageGalleryContent = () => {
           <BoardsList isOpen={isBoardListOpen} />
         </Box>
       </Box>
-      <Flex ref={galleryGridRef} direction="column" gap={2} h="full" w="full">
+      <Flex ref={galleryGridRef} direction="column" gap={2} h="full" w="full" minH={0}>
         <Flex alignItems="center" justifyContent="space-between" gap={2}>
           <Tabs index={galleryView === 'images' ? 0 : 1} variant="unstyled" size="sm" w="full">
             <TabList>