fix(ui): temp fix for stuck tooltips

invokeai/frontend/web/src/common/util/fixTooltipCloseOnScrollStyles.ts

@@ -0,0 +1,15 @@
+import type { CSSProperties } from 'react';
+
+/**
+ * Chakra's Tooltip's method of finding the nearest scroll parent has a problem - it assumes the first parent with
+ * `overflow: hidden` is the scroll parent. In this case, the Collapse component has that style, but isn't scrollable
+ * itself. The result is that the tooltip does not close on scroll, because the scrolling happens higher up in the DOM.
+ *
+ * As a hacky workaround, we can set the overflow to `visible`, which allows the scroll parent search to continue up to
+ * the actual scroll parent (in this case, the OverlayScrollbarsComponent in BoardsListWrapper).
+ *
+ * See: https://github.com/chakra-ui/chakra-ui/issues/7871#issuecomment-2453780958
+ */
+export const fixTooltipCloseOnScrollStyles: CSSProperties = {
+  overflow: 'visible',
+};

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

@@ -1,6 +1,7 @@
 import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import {
   selectBoardSearchText,
   selectListBoardsQueryArgs,
@@ -104,7 +105,7 @@ export const BoardsList = ({ isPrivate }: Props) => {
         )}
         <AddBoardButton isPrivateBoard={isPrivate} />
       </Flex>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         <Flex direction="column" gap={1}>
           {boardElements.length ? (
             boardElements

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowList.tsx

@@ -2,6 +2,7 @@ import { Button, Collapse, Flex, Icon, Spinner, Text } from '@invoke-ai/ui-libra
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import { useCategorySections } from 'features/nodes/hooks/useCategorySections';
 import {
   selectWorkflowOrderBy,
@@ -61,7 +62,7 @@ export const WorkflowList = ({ category }: { category: WorkflowCategory }) => {
           </Text>
         </Flex>
       </Button>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         {isLoading ? (
           <Flex alignItems="center" justifyContent="center" p={20}>
             <Spinner />

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/WorkflowListItem.tsx

@@ -105,7 +105,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
       onMouseOut={handleMouseOut}
       alignItems="center"
     >
-      <Tooltip label={<WorkflowListItemTooltip workflow={workflow} />}>
+      <Tooltip label={<WorkflowListItemTooltip workflow={workflow} />} closeOnScroll>
         <Flex flexDir="column" gap={1}>
           <Flex gap={4} alignItems="center">
             <Text noOfLines={2}>{workflow.name}</Text>
@@ -137,6 +137,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           label={t('workflows.edit')}
           // This prevents an issue where the tooltip isn't closed after the modal is opened
           isOpen={!isHovered ? false : undefined}
+          closeOnScroll
         >
           <IconButton
             size="sm"
@@ -150,6 +151,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
           label={t('workflows.download')}
           // This prevents an issue where the tooltip isn't closed after the modal is opened
           isOpen={!isHovered ? false : undefined}
+          closeOnScroll
         >
           <IconButton
             size="sm"
@@ -164,6 +166,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
             label={t('workflows.copyShareLink')}
             // This prevents an issue where the tooltip isn't closed after the modal is opened
             isOpen={!isHovered ? false : undefined}
+            closeOnScroll
           >
             <IconButton
               size="sm"
@@ -179,6 +182,7 @@ export const WorkflowListItem = ({ workflow }: { workflow: WorkflowRecordListIte
             label={t('workflows.delete')}
             // This prevents an issue where the tooltip isn't closed after the modal is opened
             isOpen={!isHovered ? false : undefined}
+            closeOnScroll
           >
             <IconButton
               size="sm"

invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx

@@ -8,6 +8,7 @@ const FALLBACK_ICON_SIZE = '24px';
 const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => {
   return (
     <Tooltip
+      closeOnScroll
       label={
         presetImageUrl && (
           <Image

invokeai/frontend/web/src/features/stylePresets/components/StylePresetList.tsx

@@ -1,6 +1,7 @@
 import { Button, Collapse, Flex, Icon, Text, useDisclosure } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { fixTooltipCloseOnScrollStyles } from 'common/util/fixTooltipCloseOnScrollStyles';
 import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice';
 import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold } from 'react-icons/pi';
@@ -23,7 +24,7 @@ export const StylePresetList = ({ title, data }: { title: string; data: StylePre
           </Text>
         </Flex>
       </Button>
-      <Collapse in={isOpen}>
+      <Collapse in={isOpen} style={fixTooltipCloseOnScrollStyles}>
         {data.length ? (
           data.map((preset) => <StylePresetListItem preset={preset} key={preset.id} />)
         ) : (