move boardname back and make collapsible again

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

@@ -3,7 +3,6 @@ import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import DeleteBoardModal from 'features/gallery/components/Boards/DeleteBoardModal';
-import GallerySettingsPopover from 'features/gallery/components/GallerySettingsPopover/GallerySettingsPopover';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties } from 'react';
@@ -23,7 +22,12 @@ const overlayScrollbarsStyles: CSSProperties = {
   width: '100%',
 };
 
-const BoardsList = () => {
+type Props = {
+  isOpen: boolean;
+};
+
+const BoardsList = (props: Props) => {
+  const { isOpen } = props;
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardSearchText = useAppSelector((s) => s.gallery.boardSearchText);
   const allowPrivateBoards = useAppSelector((s) => s.config.allowPrivateBoards);
@@ -45,11 +49,9 @@ const BoardsList = () => {
 
   return (
     <>
-      <Flex layerStyle="first" flexDir="column" borderRadius="base">
-        <Flex gap={2} alignItems="center" pb={2}>
+      <Collapse in={isOpen} animateOpacity>
+        <Flex layerStyle="first" flexDir="column" gap={2} p={2} my={2} borderRadius="base">
           <BoardsSearch />
-          <GallerySettingsPopover />
-        </Flex>
           {allowPrivateBoards && (
             <>
               <Flex w="full" gap={2}>
@@ -95,7 +97,7 @@ const BoardsList = () => {
               </Collapse>
             </>
           )}
-        <Flex w="full" gap={2}>
+          <Flex h="full" w="full" gap={2}>
             <Flex onClick={sharedBoardsDisclosure.onToggle} gap={2} alignItems="center" cursor="pointer" flexGrow={1}>
               <Icon
                 as={PiCaretUpBold}
@@ -113,7 +115,7 @@ const BoardsList = () => {
           </Flex>
           <Collapse in={sharedBoardsDisclosure.isOpen} animateOpacity>
             <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
-            <Flex direction="column" maxH={346} gap={1}>
+              <Flex direction="column" gap={1}>
                 {!allowPrivateBoards && <NoBoardBoard isSelected={selectedBoardId === 'none'} />}
                 {filteredSharedBoards.map((board) => (
                   <GalleryBoard
@@ -127,6 +129,7 @@ const BoardsList = () => {
             </OverlayScrollbarsComponent>
           </Collapse>
         </Flex>
+      </Collapse>
       <DeleteBoardModal boardToDelete={boardToDelete} setBoardToDelete={setBoardToDelete} />
     </>
   );

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

@@ -32,7 +32,6 @@ const GalleryBoardName = (props: Props) => {
       w="full"
       justifyContent="center"
       alignItems="center"
-      px={2}
       fontSize="md"
       color="base.50"
     >