align project name with gallery header

Author: Mary Hipp

invokeai/frontend/web/src/features/gallery/components/GalleryHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Link, Text } from '@invoke-ai/ui-library';
+import { Flex, Link, Spacer, Text } 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,15 @@ export const GalleryHeader = memo(() => {
 
   if (projectName && projectUrl) {
     return (
-      <Flex gap={2} w="full" alignItems="center" justifyContent="space-evenly" pe={2}>
+      <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>
     );
   }
 
-  return null;
+  return <Spacer />;
 });
 
 GalleryHeader.displayName = 'GalleryHeader';

invokeai/frontend/web/src/features/gallery/components/GalleryPanelContent.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Collapse, Divider, Flex, IconButton, Spacer, useDisclosure } from '@invoke-ai/ui-library';
+import { Box, Button, Collapse, Divider, Flex, IconButton, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useScopeOnFocus } from 'common/hooks/interactionScopes';
 import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
@@ -52,18 +52,19 @@ const GalleryPanelContent = () => {
 
   return (
     <Flex ref={ref} position="relative" flexDirection="column" h="full" w="full" tabIndex={-1}>
-      <GalleryHeader />
       <Flex alignItems="center" w="full">
-        <Button
-          size="sm"
-          variant="ghost"
-          onClick={boardsListPanel.toggle}
-          rightIcon={boardsListPanel.isCollapsed ? <PiCaretDownBold /> : <PiCaretUpBold />}
-        >
-          {boardsListPanel.isCollapsed ? t('boards.viewBoards') : t('boards.hideBoards')}
-        </Button>
-        <Spacer />
-        <Flex h="full">
+        <Flex w="25%">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={boardsListPanel.toggle}
+            rightIcon={boardsListPanel.isCollapsed ? <PiCaretDownBold /> : <PiCaretUpBold />}
+          >
+            {boardsListPanel.isCollapsed ? t('boards.viewBoards') : t('boards.hideBoards')}
+          </Button>
+        </Flex>
+        <GalleryHeader />
+        <Flex h="full" w="25%" justifyContent="flex-end">
           <GallerySettingsPopover />
           <IconButton
             size="sm"