From b1e748b9582f98b866bac767fb2889d805febe12 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 27 Feb 2024 13:24:32 +0700
Subject: [PATCH] fix: system monitor expand overlap tooltip ribbon (#2158)

---
 web/containers/Layout/Ribbon/index.tsx | 49 ++++++++++++++------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/web/containers/Layout/Ribbon/index.tsx b/web/containers/Layout/Ribbon/index.tsx
index 4545e60ce..c0bc46586 100644
--- a/web/containers/Layout/Ribbon/index.tsx
+++ b/web/containers/Layout/Ribbon/index.tsx
@@ -2,6 +2,7 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  TooltipPortal,
   TooltipArrow,
 } from '@janhq/uikit'
 import { motion as m } from 'framer-motion'
@@ -118,24 +119,26 @@ export default function RibbonNav() {
                           />
                         )}
                       </TooltipTrigger>
-                      {serverEnabled &&
-                      primary.state === MainViewState.Thread ? (
-                        <TooltipContent
-                          side="right"
-                          sideOffset={10}
-                          className="max-w-[180px]"
-                        >
-                          <span>
-                            Threads are disabled while the server is running
-                          </span>
-                          <TooltipArrow />
-                        </TooltipContent>
-                      ) : (
-                        <TooltipContent side="right" sideOffset={10}>
-                          <span>{primary.name}</span>
-                          <TooltipArrow />
-                        </TooltipContent>
-                      )}
+                      <TooltipPortal>
+                        {serverEnabled &&
+                        primary.state === MainViewState.Thread ? (
+                          <TooltipContent
+                            side="right"
+                            sideOffset={10}
+                            className="max-w-[180px]"
+                          >
+                            <span>
+                              Threads are disabled while the server is running
+                            </span>
+                            <TooltipArrow />
+                          </TooltipContent>
+                        ) : (
+                          <TooltipContent side="right" sideOffset={10}>
+                            <span>{primary.name}</span>
+                            <TooltipArrow />
+                          </TooltipContent>
+                        )}
+                      </TooltipPortal>
                     </Tooltip>
                   </div>
                 )
@@ -168,10 +171,12 @@ export default function RibbonNav() {
                           />
                         )}
                       </TooltipTrigger>
-                      <TooltipContent side="right" sideOffset={10}>
-                        <span>{secondary.name}</span>
-                        <TooltipArrow />
-                      </TooltipContent>
+                      <TooltipPortal>
+                        <TooltipContent side="right" sideOffset={10}>
+                          <span>{secondary.name}</span>
+                          <TooltipArrow />
+                        </TooltipContent>
+                      </TooltipPortal>
                     </Tooltip>
                   </div>
                 )