fix(ui): board collapse button styling

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

@@ -1,9 +1,8 @@
 import { ChevronUpIcon } from '@chakra-ui/icons';
-import { Button, Flex } from '@chakra-ui/react';
+import { Button, Flex, Spacer } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { InvText } from 'common/components/InvText/wrapper';
 import { memo, useMemo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
@@ -35,32 +34,20 @@ const GalleryBoardName = (props: Props) => {
       as={Button}
       onClick={onToggle}
       size="sm"
-      sx={{
+      position="relative"
-        position: 'relative',
+      gap={2}
-        gap: 2,
+      w="full"
-        w: 'full',
+      justifyContent="center"
-        justifyContent: 'space-between',
+      alignItems="center"
-        alignItems: 'center',
+      px={2}
-        px: 2,
-      }}
     >
-      <InvText
+      <Spacer />
-        noOfLines={1}
+      {formattedBoardName}
-        sx={{
+      <Spacer />
-          fontWeight: 'semibold',
-          w: '100%',
-          textAlign: 'center',
-          color: 'base.200',
-        }}
-      >
-        {formattedBoardName}
-      </InvText>
       <ChevronUpIcon
-        sx={{
+        transform={isOpen ? 'rotate(0deg)' : 'rotate(180deg)'}
-          transform: isOpen ? 'rotate(0deg)' : 'rotate(180deg)',
+        transitionProperty="common"
-          transitionProperty: 'common',
+        transitionDuration="normal"
-          transitionDuration: 'normal',
-        }}
       />
     </Flex>
   );