From 24bf1ea65aced337b13a5c8f3fbc28d7ca9f9d4d Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:52:40 +1000
Subject: [PATCH] fix(ui): boards cut off when search open

---
 .../Boards/BoardsList/BoardsList.tsx          | 86 ++++++++++---------
 .../components/ImageGalleryContent.tsx        | 25 +++---
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
index bd4c42e8d1..4325281e0f 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text } from '@invoke-ai/ui-library';
+import { Box, Flex, Text } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@@ -40,9 +40,41 @@ const BoardsList = () => {
 
   return (
     <>
-      <Flex flexDir="column" gap={2} borderRadius="base" maxHeight="100%">
-        <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-          {allowPrivateBoards && (
+      <Box position="relative" w="full" h="full">
+        <Box position="absolute" top={0} right={0} bottom={0} left={0}>
+          <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
+            {allowPrivateBoards && (
+              <Flex direction="column" gap={1}>
+                <Flex
+                  position="sticky"
+                  w="full"
+                  justifyContent="space-between"
+                  alignItems="center"
+                  ps={2}
+                  pb={1}
+                  pt={2}
+                  zIndex={1}
+                  top={0}
+                  bg="base.900"
+                >
+                  <Text fontSize="md" fontWeight="semibold" userSelect="none">
+                    {t('boards.private')}
+                  </Text>
+                  <AddBoardButton isPrivateBoard={true} />
+                </Flex>
+                <Flex direction="column" gap={1}>
+                  <NoBoardBoard isSelected={selectedBoardId === 'none'} />
+                  {filteredPrivateBoards.map((board) => (
+                    <GalleryBoard
+                      board={board}
+                      isSelected={selectedBoardId === board.board_id}
+                      setBoardToDelete={setBoardToDelete}
+                      key={board.board_id}
+                    />
+                  ))}
+                </Flex>
+              </Flex>
+            )}
             <Flex direction="column" gap={1}>
               <Flex
                 position="sticky"
@@ -50,19 +82,20 @@ const BoardsList = () => {
                 justifyContent="space-between"
                 alignItems="center"
                 ps={2}
-                py={1}
+                pb={1}
+                pt={2}
                 zIndex={1}
                 top={0}
                 bg="base.900"
               >
                 <Text fontSize="md" fontWeight="semibold" userSelect="none">
-                  {t('boards.private')}
+                  {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
                 </Text>
-                <AddBoardButton isPrivateBoard={true} />
+                <AddBoardButton isPrivateBoard={false} />
               </Flex>
               <Flex direction="column" gap={1}>
-                <NoBoardBoard isSelected={selectedBoardId === 'none'} />
-                {filteredPrivateBoards.map((board) => (
+                {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
+                {filteredSharedBoards.map((board) => (
                   <GalleryBoard
                     board={board}
                     isSelected={selectedBoardId === board.board_id}
@@ -72,38 +105,9 @@ const BoardsList = () => {
                 ))}
               </Flex>
             </Flex>
-          )}
-          <Flex direction="column" gap={1} pb={2}>
-            <Flex
-              position="sticky"
-              w="full"
-              justifyContent="space-between"
-              alignItems="center"
-              ps={2}
-              py={1}
-              zIndex={1}
-              top={0}
-              bg="base.900"
-            >
-              <Text fontSize="md" fontWeight="semibold" userSelect="none">
-                {allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
-              </Text>
-              <AddBoardButton isPrivateBoard={false} />
-            </Flex>
-            <Flex direction="column" gap={1}>
-              {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
-              {filteredSharedBoards.map((board) => (
-                <GalleryBoard
-                  board={board}
-                  isSelected={selectedBoardId === board.board_id}
-                  setBoardToDelete={setBoardToDelete}
-                  key={board.board_id}
-                />
-              ))}
-            </Flex>
-          </Flex>
-        </OverlayScrollbarsComponent>
-      </Flex>
+          </OverlayScrollbarsComponent>
+        </Box>
+      </Box>
       <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );
diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
index 7c992c65d6..5a096f5cef 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
@@ -16,6 +16,7 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
 import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
+import type { CSSProperties } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiMagnifyingGlassBold } from 'react-icons/pi';
@@ -29,13 +30,15 @@ import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
 import { GallerySearch } from './ImageGrid/GallerySearch';
 
-const baseStyles: ChakraProps['sx'] = {
+const COLLAPSE_STYLES: CSSProperties = { flexShrink: 0, minHeight: 0 };
+
+const BASE_STYLES: ChakraProps['sx'] = {
   fontWeight: 'semibold',
   fontSize: 'sm',
   color: 'base.300',
 };
 
-const selectedStyles: ChakraProps['sx'] = {
+const SELECTED_STYLES: ChakraProps['sx'] = {
   borderColor: 'base.800',
   borderBottomColor: 'base.900',
   color: 'invokeBlue.300',
@@ -110,11 +113,13 @@ const ImageGalleryContent = () => {
           onExpand={boardsListPanel.onExpand}
           collapsible
         >
-          <Collapse in={boardSearchDisclosure.isOpen}>
-            <BoardsSearch />
-          </Collapse>
-          <Divider pt={2} />
-          <BoardsList />
+          <Flex flexDir="column" w="full" h="full">
+            <Collapse in={boardSearchDisclosure.isOpen} style={COLLAPSE_STYLES}>
+              <BoardsSearch />
+            </Collapse>
+            <Divider pt={2} />
+            <BoardsList />
+          </Flex>
         </Panel>
         <ResizeHandle
           id="gallery-panel-handle"
@@ -125,10 +130,10 @@ const ImageGalleryContent = () => {
           <Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full">
             <Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column" w="full">
               <TabList gap={2} fontSize="sm" borderColor="base.800">
-                <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
+                <Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
                   {t('parameters.images')}
                 </Tab>
-                <Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
+                <Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
                   {t('gallery.assets')}
                 </Tab>
                 <Spacer />
@@ -157,7 +162,7 @@ const ImageGalleryContent = () => {
               </TabList>
             </Tabs>
             <Box w="full">
-              <Collapse in={searchDisclosure.isOpen}>
+              <Collapse in={searchDisclosure.isOpen} style={COLLAPSE_STYLES}>
                 <Box w="full" pt={2}>
                   <GallerySearch />
                 </Box>