From 2460689c002923c37592ce4e33f579b194c87582 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 9 Jul 2024 22:47:03 +1000
Subject: [PATCH] feat(ui): style board name

---
 .../gallery/components/GalleryBoardName.tsx   | 24 +++++--------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
index d4c22b4fe2..233aa8a8c1 100644
--- a/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/GalleryBoardName.tsx
@@ -1,29 +1,17 @@
-import { Flex } from '@invoke-ai/ui-library';
+import { Flex, Text } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 const GalleryBoardName = () => {
   const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
   const boardName = useBoardName(selectedBoardId);
 
-  const formattedBoardName = useMemo(() => {
-    if (boardName.length > 20) {
-      return `${boardName.substring(0, 20)}...`;
-    }
-    return boardName;
-  }, [boardName]);
-
   return (
-    <Flex
-      justifyContent="center"
-      fontSize="md"
-      fontWeight="bold"
-      borderWidth="thin"
-      borderStyle="solid"
-      borderRadius="base"
-    >
-      {formattedBoardName}
+    <Flex w="full" borderWidth={1} borderRadius="base" alignItems="center" justifyContent="center" px={2}>
+      <Text fontWeight="semibold" fontSize="md" noOfLines={1} wordBreak="break-all" color="base.200">
+        {boardName}
+      </Text>
     </Flex>
   );
 };