From 306c11d73029304903241529f3b8c886194f38ee Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 6 May 2024 12:18:28 -0500
Subject: [PATCH] use portal on all sidebar tooltips (#11267)

---
 .../components/filter/CameraGroupSelector.tsx   | 17 +++++++++++------
 web/src/components/menu/AccountSettings.tsx     |  9 ++++++---
 web/src/components/menu/GeneralSettings.tsx     |  9 ++++++---
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
index d67fea65a..0b38bb713 100644
--- a/web/src/components/filter/CameraGroupSelector.tsx
+++ b/web/src/components/filter/CameraGroupSelector.tsx
@@ -59,6 +59,7 @@ import { Toaster } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { ScrollArea, ScrollBar } from "../ui/scroll-area";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type CameraGroupSelectorProps = {
   className?: string;
@@ -137,9 +138,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                 <MdHome className="size-4" />
               </Button>
             </TooltipTrigger>
-            <TooltipContent className="capitalize" side="right">
-              All Cameras
-            </TooltipContent>
+            <TooltipPortal>
+              <TooltipContent className="capitalize" side="right">
+                All Cameras
+              </TooltipContent>
+            </TooltipPortal>
           </Tooltip>
           {groups.map(([name, config]) => {
             return (
@@ -161,9 +164,11 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                     {getIconForGroup(config.icon)}
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent className="capitalize" side="right">
-                  {name}
-                </TooltipContent>
+                <TooltipPortal>
+                  <TooltipContent className="capitalize" side="right">
+                    {name}
+                  </TooltipContent>
+                </TooltipPortal>
               </Tooltip>
             );
           })}
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index 72d05e81f..a5068c753 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -3,6 +3,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
 
@@ -19,9 +20,11 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
           <VscAccount className="size-5 md:m-[6px]" />
         </div>
       </TooltipTrigger>
-      <TooltipContent side="right">
-        <p>Account</p>
-      </TooltipContent>
+      <TooltipPortal>
+        <TooltipContent side="right">
+          <p>Account</p>
+        </TooltipContent>
+      </TooltipPortal>
     </Tooltip>
   );
 }
diff --git a/web/src/components/menu/GeneralSettings.tsx b/web/src/components/menu/GeneralSettings.tsx
index f868eddb5..6974c8075 100644
--- a/web/src/components/menu/GeneralSettings.tsx
+++ b/web/src/components/menu/GeneralSettings.tsx
@@ -65,6 +65,7 @@ import {
   DialogPortal,
   DialogTrigger,
 } from "../ui/dialog";
+import { TooltipPortal } from "@radix-ui/react-tooltip";
 
 type GeneralSettingsProps = {
   className?: string;
@@ -124,9 +125,11 @@ export default function GeneralSettings({ className }: GeneralSettingsProps) {
                     <LuSettings className="size-5 md:m-[6px]" />
                   </div>
                 </TooltipTrigger>
-                <TooltipContent side="right">
-                  <p>Settings</p>
-                </TooltipContent>
+                <TooltipPortal>
+                  <TooltipContent side="right">
+                    <p>Settings</p>
+                  </TooltipContent>
+                </TooltipPortal>
               </Tooltip>
             </a>
           </Trigger>