From 46e4004cf6a305303d72e7347c9341ca78d5653a Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 29 Feb 2024 09:15:03 -0600
Subject: [PATCH] use portal for tooltips

---
 web/src/components/navigation/NavItem.tsx       |  9 ++++++---
 .../components/settings/SettingsNavItems.tsx    | 17 +++++++++++------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 9e27c01fa..8eba96d2f 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -6,6 +6,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 const variants = {
   primary: {
@@ -54,10 +55,12 @@ export default function NavItem({
           <TooltipTrigger>
             <Icon className="size-5 md:m-[6px]" />
           </TooltipTrigger>
+          <TooltipPortal>
+            <TooltipContent side="right">
+              <p>{title}</p>
+            </TooltipContent>
+          </TooltipPortal>
         </NavLink>
-        <TooltipContent side="right">
-          <p>{title}</p>
-        </TooltipContent>
       </Tooltip>
     )
   );
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index db42775d3..9875ad298 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -58,6 +58,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type SettingsNavItemsProps = {
   className?: string;
@@ -106,9 +107,11 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
                     <LuSettings />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent side="right">
-                  <p>Settings</p>
-                </TooltipContent>
+                <TooltipPortal>
+                  <TooltipContent side="right">
+                    <p>Settings</p>
+                  </TooltipContent>
+                </TooltipPortal>
               </Tooltip>
             </a>
           </DropdownMenuTrigger>
@@ -249,9 +252,11 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
               <VscAccount />
             </Button>
           </TooltipTrigger>
-          <TooltipContent side="right">
-            <p>Account</p>
-          </TooltipContent>
+          <TooltipPortal>
+            <TooltipContent side="right">
+              <p>Account</p>
+            </TooltipContent>
+          </TooltipPortal>
         </Tooltip>
       </div>
       {restartDialogOpen && (