Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): alignment & overflow on gallery header

Browse Source
This commit is contained in:
psychedelicious 2024-07-24 12:28:53 +10:00
parent 44284d671c
commit ca8441a32f
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardsListWrapper.tsx
View File

@ -16,16 +16,14 @@ const BoardsListWrapper = () => {
const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards); const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
return ( return (
<> <Box position="relative" w="full" h="full">
<Box position="relative" w="full" h="full"> <Box position="absolute" top={0} right={0} bottom={0} left={0}>
<Box position="absolute" top={0} right={0} bottom={0} left={0}> <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
<OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}> {allowPrivateBoards && <BoardsList isPrivate={true} />}
{allowPrivateBoards && <BoardsList isPrivate={true} />} <BoardsList />
<BoardsList /> </OverlayScrollbarsComponent>
</OverlayScrollbarsComponent>
</Box>
</Box> </Box>
</> </Box>
); );
}; };
export default memo(BoardsListWrapper); export default memo(BoardsListWrapper);

4
invokeai/frontend/web/src/features/gallery/components/GalleryHeader.tsx
View File

@ -10,14 +10,14 @@ export const GalleryHeader = memo(() => {
if (projectName && projectUrl) { if (projectName && projectUrl) {
return ( return (
<Flex gap={2} w="full" alignItems="center" justifyContent="space-evenly" pe={2}> <Flex gap={2} w="full" alignItems="center" justifyContent="space-evenly" pe={2}>
<Text fontSize="md" fontWeight="semibold" noOfLines={1} w="full" textAlign="center"> <Text fontSize="md" fontWeight="semibold" noOfLines={1} wordBreak="break-all" w="full" textAlign="center">
<Link href={projectUrl}>{projectName}</Link> <Link href={projectUrl}>{projectName}</Link>
</Text> </Text>
</Flex> </Flex>
); );
} }
return <></>; return null;
}); });
GalleryHeader.displayName = 'GalleryHeader'; GalleryHeader.displayName = 'GalleryHeader';

1
invokeai/frontend/web/src/features/gallery/components/ImageGalleryContent.tsx
View File

@ -60,6 +60,7 @@ const ImageGalleryContent = () => {
<GalleryHeader /> <GalleryHeader />
<Flex alignItems="center" justifyContent="space-between" w="full"> <Flex alignItems="center" justifyContent="space-between" w="full">
<Button <Button
w={112}
size="sm" size="sm"
variant="ghost" variant="ghost"
onClick={handleToggleBoardPanel} onClick={handleToggleBoardPanel}