From a07fcffe7ffaf6eec5f375c0a386774ad3107021 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 25 Sep 2024 20:10:42 -0500
Subject: [PATCH] Portal tooltips

---
 web/src/components/card/SearchThumbnail.tsx | 23 ++++++++++++---------
 web/src/views/search/SearchView.tsx         | 19 ++++++++++-------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/web/src/components/card/SearchThumbnail.tsx b/web/src/components/card/SearchThumbnail.tsx
index 385d5ebd4..c595cc85f 100644
--- a/web/src/components/card/SearchThumbnail.tsx
+++ b/web/src/components/card/SearchThumbnail.tsx
@@ -15,6 +15,7 @@ import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { SearchResult } from "@/types/search";
 import useContextMenu from "@/hooks/use-contextmenu";
 import { cn } from "@/lib/utils";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type SearchThumbnailProps = {
   searchResult: SearchResult;
@@ -95,16 +96,18 @@ export default function SearchThumbnail({
                 </div>
               </TooltipTrigger>
             </div>
-            <TooltipContent className="capitalize">
-              {[...new Set([searchResult.label])]
-                .filter(
-                  (item) => item !== undefined && !item.includes("-verified"),
-                )
-                .map((text) => capitalizeFirstLetter(text))
-                .sort()
-                .join(", ")
-                .replaceAll("-verified", "")}
-            </TooltipContent>
+            <TooltipPortal>
+              <TooltipContent className="capitalize">
+                {[...new Set([searchResult.label])]
+                  .filter(
+                    (item) => item !== undefined && !item.includes("-verified"),
+                  )
+                  .map((text) => capitalizeFirstLetter(text))
+                  .sort()
+                  .join(", ")
+                  .replaceAll("-verified", "")}
+              </TooltipContent>
+            </TooltipPortal>
           </Tooltip>
         </div>
         <div className="rounded-t-l pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full bg-gradient-to-b from-black/60 to-transparent"></div>
diff --git a/web/src/views/search/SearchView.tsx b/web/src/views/search/SearchView.tsx
index 3677612c7..48920e44d 100644
--- a/web/src/views/search/SearchView.tsx
+++ b/web/src/views/search/SearchView.tsx
@@ -31,6 +31,7 @@ import InputWithTags from "@/components/input/InputWithTags";
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { isEqual } from "lodash";
 import { formatDateToLocaleString } from "@/utils/dateUtil";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type SearchViewProps = {
   search: string;
@@ -401,14 +402,16 @@ export default function SearchView({
                                 %
                               </Chip>
                             </TooltipTrigger>
-                            <TooltipContent>
-                              Matched {value.search_source} at{" "}
-                              {zScoreToConfidence(
-                                value.search_distance,
-                                value.search_source,
-                              )}
-                              %
-                            </TooltipContent>
+                            <TooltipPortal>
+                              <TooltipContent>
+                                Matched {value.search_source} at{" "}
+                                {zScoreToConfidence(
+                                  value.search_distance,
+                                  value.search_source,
+                                )}
+                                %
+                              </TooltipContent>
+                            </TooltipPortal>
                           </Tooltip>
                         </div>
                       )}