Skip to content

Commit 24bf1ea

Browse files
psychedeliciouspsychedelicious
committed
fix(ui): boards cut off when search open
1 parent 28e79c4 commit 24bf1ea

File tree

2 files changed

+60
-51
lines changed

2 files changed

+60
-51
lines changed

‎invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsList.tsx

Lines changed: 45 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Flex, Text } from '@invoke-ai/ui-library';
1+
import { Box, Flex, Text } from '@invoke-ai/ui-library';
22
import { EMPTY_ARRAY } from 'app/store/constants';
33
import { useAppSelector } from 'app/store/storeHooks';
44
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
@@ -40,29 +40,62 @@ const BoardsList = () => {
4040

4141
return (
4242
<>
43-
<Flex flexDir="column" gap={2} borderRadius="base" maxHeight="100%">
44-
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
45-
{allowPrivateBoards && (
43+
<Box position="relative" w="full" h="full">
44+
<Box position="absolute" top={0} right={0} bottom={0} left={0}>
45+
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
46+
{allowPrivateBoards && (
47+
<Flex direction="column" gap={1}>
48+
<Flex
49+
position="sticky"
50+
w="full"
51+
justifyContent="space-between"
52+
alignItems="center"
53+
ps={2}
54+
pb={1}
55+
pt={2}
56+
zIndex={1}
57+
top={0}
58+
bg="base.900"
59+
>
60+
<Text fontSize="md" fontWeight="semibold" userSelect="none">
61+
{t('boards.private')}
62+
</Text>
63+
<AddBoardButton isPrivateBoard={true} />
64+
</Flex>
65+
<Flex direction="column" gap={1}>
66+
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
67+
{filteredPrivateBoards.map((board) => (
68+
<GalleryBoard
69+
board={board}
70+
isSelected={selectedBoardId === board.board_id}
71+
setBoardToDelete={setBoardToDelete}
72+
key={board.board_id}
73+
/>
74+
))}
75+
</Flex>
76+
</Flex>
77+
)}
4678
<Flex direction="column" gap={1}>
4779
<Flex
4880
position="sticky"
4981
w="full"
5082
justifyContent="space-between"
5183
alignItems="center"
5284
ps={2}
53-
py={1}
85+
pb={1}
86+
pt={2}
5487
zIndex={1}
5588
top={0}
5689
bg="base.900"
5790
>
5891
<Text fontSize="md" fontWeight="semibold" userSelect="none">
59-
{t('boards.private')}
92+
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
6093
</Text>
61-
<AddBoardButton isPrivateBoard={true} />
94+
<AddBoardButton isPrivateBoard={false} />
6295
</Flex>
6396
<Flex direction="column" gap={1}>
64-
<NoBoardBoard isSelected={selectedBoardId === 'none'} />
65-
{filteredPrivateBoards.map((board) => (
97+
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
98+
{filteredSharedBoards.map((board) => (
6699
<GalleryBoard
67100
board={board}
68101
isSelected={selectedBoardId === board.board_id}
@@ -72,38 +105,9 @@ const BoardsList = () => {
72105
))}
73106
</Flex>
74107
</Flex>
75-
)}
76-
<Flex direction="column" gap={1} pb={2}>
77-
<Flex
78-
position="sticky"
79-
w="full"
80-
justifyContent="space-between"
81-
alignItems="center"
82-
ps={2}
83-
py={1}
84-
zIndex={1}
85-
top={0}
86-
bg="base.900"
87-
>
88-
<Text fontSize="md" fontWeight="semibold" userSelect="none">
89-
{allowPrivateBoards ? t('boards.shared') : t('boards.boards')}
90-
</Text>
91-
<AddBoardButton isPrivateBoard={false} />
92-
</Flex>
93-
<Flex direction="column" gap={1}>
94-
{!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
95-
{filteredSharedBoards.map((board) => (
96-
<GalleryBoard
97-
board={board}
98-
isSelected={selectedBoardId === board.board_id}
99-
setBoardToDelete={setBoardToDelete}
100-
key={board.board_id}
101-
/>
102-
))}
103-
</Flex>
104-
</Flex>
105-
</OverlayScrollbarsComponent>
106-
</Flex>
108+
</OverlayScrollbarsComponent>
109+
</Box>
110+
</Box>
107111
<DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
108112
</>
109113
);

‎invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
1616
import { galleryViewChanged } from 'features/gallery/store/gallerySlice';
1717
import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
1818
import { usePanel, type UsePanelOptions } from 'features/ui/hooks/usePanel';
19+
import type { CSSProperties } from 'react';
1920
import { memo, useCallback, useMemo, useRef } from 'react';
2021
import { useTranslation } from 'react-i18next';
2122
import { PiMagnifyingGlassBold } from 'react-icons/pi';
@@ -29,13 +30,15 @@ import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
2930
import { GalleryPagination } from './ImageGrid/GalleryPagination';
3031
import { GallerySearch } from './ImageGrid/GallerySearch';
3132

32-
const baseStyles: ChakraProps['sx'] = {
33+
const COLLAPSE_STYLES: CSSProperties = { flexShrink: 0, minHeight: 0 };
34+
35+
const BASE_STYLES: ChakraProps['sx'] = {
3336
fontWeight: 'semibold',
3437
fontSize: 'sm',
3538
color: 'base.300',
3639
};
3740

38-
const selectedStyles: ChakraProps['sx'] = {
41+
const SELECTED_STYLES: ChakraProps['sx'] = {
3942
borderColor: 'base.800',
4043
borderBottomColor: 'base.900',
4144
color: 'invokeBlue.300',
@@ -110,11 +113,13 @@ const ImageGalleryContent = () => {
110113
onExpand={boardsListPanel.onExpand}
111114
collapsible
112115
>
113-
<Collapse in={boardSearchDisclosure.isOpen}>
114-
<BoardsSearch />
115-
</Collapse>
116-
<Divider pt={2} />
117-
<BoardsList />
116+
<Flex flexDir="column" w="full" h="full">
117+
<Collapse in={boardSearchDisclosure.isOpen} style={COLLAPSE_STYLES}>
118+
<BoardsSearch />
119+
</Collapse>
120+
<Divider pt={2} />
121+
<BoardsList />
122+
</Flex>
118123
</Panel>
119124
<ResizeHandle
120125
id="gallery-panel-handle"
@@ -125,10 +130,10 @@ const ImageGalleryContent = () => {
125130
<Flex flexDirection="column" alignItems="center" justifyContent="space-between" h="full" w="full">
126131
<Tabs index={galleryView === 'images' ? 0 : 1} variant="enclosed" display="flex" flexDir="column" w="full">
127132
<TabList gap={2} fontSize="sm" borderColor="base.800">
128-
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickImages} data-testid="images-tab">
133+
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickImages} data-testid="images-tab">
129134
{t('parameters.images')}
130135
</Tab>
131-
<Tab sx={baseStyles} _selected={selectedStyles} onClick={handleClickAssets} data-testid="assets-tab">
136+
<Tab sx={BASE_STYLES} _selected={SELECTED_STYLES} onClick={handleClickAssets} data-testid="assets-tab">
132137
{t('gallery.assets')}
133138
</Tab>
134139
<Spacer />
@@ -157,7 +162,7 @@ const ImageGalleryContent = () => {
157162
</TabList>
158163
</Tabs>
159164
<Box w="full">
160-
<Collapse in={searchDisclosure.isOpen}>
165+
<Collapse in={searchDisclosure.isOpen} style={COLLAPSE_STYLES}>
161166
<Box w="full" pt={2}>
162167
<GallerySearch />
163168
</Box>

0 commit comments

Comments
 (0)