github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweak(ui): prevent show/hide boards button cutoff

Browse Source 
The use of hard 25% widths caused issues for some translations. Adjusted styling to not rely on any hard numbers. Tested with a project name and URL.
This commit is contained in:
psychedelicious
2024-10-24 21:06:20 +10:00
committed by Kent Keirsey
parent 3947d4a165
commit 32d9abe802
2 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
import { Flex, Link, Spacer, Text } from '@invoke-ai/ui-library';
import { Link } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { $projectName, $projectUrl } from 'app/store/nanostores/projectId';
import { memo } from 'react';
@@ -9,15 +9,13 @@ export const GalleryHeader = memo(() => {
if (projectName && projectUrl) {
return (
<Flex gap={2} alignItems="center" justifyContent="space-evenly" pe={2} w="50%">
<Text fontSize="md" fontWeight="semibold" noOfLines={1} wordBreak="break-all" w="full" textAlign="center">
<Link href={projectUrl}>{projectName}</Link>
</Text>
</Flex>
<Link fontSize="md" fontWeight="semibold" noOfLines={1} wordBreak="break-all" href={projectUrl}>
{projectName}
</Link>
);
}
return <Spacer />;
return null;
});
GalleryHeader.displayName = 'GalleryHeader';

10
invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx
View File

@@ -51,8 +51,8 @@ const GalleryPanelContent = () => {
return (
<Flex ref={galleryPanelFocusRef} position="relative" flexDirection="column" h="full" w="full" tabIndex={-1}>
<Flex alignItems="center" w="full">
<Flex w="25%">
<Flex alignItems="center" justifyContent="space-between" w="full">
<Flex flexGrow={1} flexBasis={0}>
<Button
size="sm"
variant="ghost"
@@ -62,8 +62,10 @@ const GalleryPanelContent = () => {
{boardsListPanel.isCollapsed ? t('boards.viewBoards') : t('boards.hideBoards')}
</Button>
</Flex>
<GalleryHeader />
<Flex h="full" w="25%" justifyContent="flex-end">
<Flex>
<GalleryHeader />
</Flex>
<Flex flexGrow={1} flexBasis={0} justifyContent="flex-end">
<BoardsSettingsPopover />
<IconButton
size="sm"