From e89de1d5b7b23df1b73f5d0ac3cb88e63aba9d29 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 24 Jul 2024 12:23:05 +1000
Subject: [PATCH] feat(ui): tweak board tooltip styles

When the totals were high enough, the image looked really off. Also fixed some inconsistent padding.
---
 .../Boards/BoardsList/BoardTooltip.tsx           | 16 +++++++++-------
 .../Boards/BoardsList/GalleryBoard.tsx           |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
index 6c90d7b049..63ba2991cf 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/BoardTooltip.tsx
@@ -24,22 +24,24 @@ export const BoardTooltip = ({ board }: Props) => {
   const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
 
   return (
-    <Flex flexDir="column" alignItems="center">
+    <Flex flexDir="column" alignItems="center" gap={1}>
       {coverImage && (
         <Image
           src={coverImage.thumbnail_url}
           draggable={false}
           objectFit="cover"
-          w={100}
-          h={100}
+          maxW={150}
+          aspectRatio="1/1"
           borderRadius="base"
           borderBottomRadius="lg"
         />
       )}
-      <Text>
-        {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
-      </Text>
-      {board?.archived && <Text>({t('boards.archived')})</Text>}
+      <Flex flexDir="column" alignItems="center">
+        <Text noOfLines={1}>
+          {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
+        </Text>
+        {board?.archived && <Text>({t('boards.archived')})</Text>}
+      </Flex>
     </Flex>
   );
 };
diff --git a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
index 326459d627..8eb75624a5 100644
--- a/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx
@@ -115,7 +115,7 @@ const GalleryBoard = ({ board, isSelected, setBoardToDelete }: GalleryBoardProps
   return (
     <BoardContextMenu board={board} setBoardToDelete={setBoardToDelete}>
       {(ref) => (
-        <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll>
+        <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
           <Flex
             position="relative"
             ref={ref}