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);
return (
<>
<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 && <BoardsList isPrivate={true} />}
<BoardsList />
</OverlayScrollbarsComponent>
</Box>
<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 && <BoardsList isPrivate={true} />}
<BoardsList />
</OverlayScrollbarsComponent>
</Box>
</>
</Box>
);
};
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) {
return (
<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>
</Text>
</Flex>
);
}
return <></>;
return null;
});
GalleryHeader.displayName = 'GalleryHeader';

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

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