From 2df95d140af40983653840a617cf9b8aaa076604 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sat, 19 Oct 2024 17:29:17 +0100
Subject: [PATCH] fix tooltips

---
 projects/website/src/components/footer.tsx    |  2 +-
 .../leaderboard/leaderboard-scores.tsx        |  2 +-
 .../components/loaders/fullscreen-loader.tsx  |  2 +-
 .../components/player/chart/player-charts.tsx |  2 +-
 .../src/components/player/player-header.tsx   |  8 ++--
 .../src/components/player/player-info.tsx     |  2 +-
 .../src/components/player/player-scores.tsx   |  2 +-
 .../website/src/components/ranking/mini.tsx   |  2 +-
 .../score/score-feed/score-feed.tsx           |  2 +-
 .../src/components/score/score-info.tsx       |  4 +-
 .../src/components/score/score-rank-info.tsx  |  2 +-
 .../website/src/components/ui/tooltip.tsx     | 41 ++++++++++++-------
 12 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/projects/website/src/components/footer.tsx b/projects/website/src/components/footer.tsx
index 3b15016..a7afb45 100644
--- a/projects/website/src/components/footer.tsx
+++ b/projects/website/src/components/footer.tsx
@@ -54,7 +54,7 @@ export default function Footer() {
           return (
             <Link
               key={index}
-              className="px-2 text-pp hover:brightness-50 transition-all transform-gpu"
+              className="px-2 text-pp hover:brightness-[66%] transition-all transform-gpu"
               href={item.link}
               target={item.openInNewTab ? "_blank" : undefined}
             >
diff --git a/projects/website/src/components/leaderboard/leaderboard-scores.tsx b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
index 0c96bda..d172d15 100644
--- a/projects/website/src/components/leaderboard/leaderboard-scores.tsx
+++ b/projects/website/src/components/leaderboard/leaderboard-scores.tsx
@@ -162,7 +162,7 @@ export default function LeaderboardScores({
           })}
       </div>
 
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto relative">
         <table className="table w-full table-auto border-spacing-2 border-none text-left text-sm">
           <thead>
             <tr>
diff --git a/projects/website/src/components/loaders/fullscreen-loader.tsx b/projects/website/src/components/loaders/fullscreen-loader.tsx
index e91cc0d..2fb5f3b 100644
--- a/projects/website/src/components/loaders/fullscreen-loader.tsx
+++ b/projects/website/src/components/loaders/fullscreen-loader.tsx
@@ -7,7 +7,7 @@ type Props = {
 
 export default function FullscreenLoader({ reason }: Props) {
   return (
-    <div className="absolute w-screen h-screen bg-background brightness-50 flex flex-col gap-6 items-center justify-center">
+    <div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
       <div className="flex flex-col items-center justify-center">
         <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
         <p className="text-gray-300 text-md text-center">{reason}</p>
diff --git a/projects/website/src/components/player/chart/player-charts.tsx b/projects/website/src/components/player/chart/player-charts.tsx
index f716d71..b65227d 100644
--- a/projects/website/src/components/player/chart/player-charts.tsx
+++ b/projects/website/src/components/player/chart/player-charts.tsx
@@ -78,7 +78,7 @@ export default function PlayerCharts({ player }: PlayerChartsProps) {
               >
                 <button
                   onClick={() => setSelectedChart(chart)}
-                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-50 transform-gpu transition-all`}
+                  className={`border ${isSelected ? "border-1" : "border-input"} flex items-center justify-center p-[2px] w-[26px] h-[26px] rounded-full hover:brightness-[66%] transform-gpu transition-all`}
                 >
                   {chart.icon}
                 </button>
diff --git a/projects/website/src/components/player/player-header.tsx b/projects/website/src/components/player/player-header.tsx
index 9a6ea22..65ee003 100644
--- a/projects/website/src/components/player/player-header.tsx
+++ b/projects/website/src/components/player/player-header.tsx
@@ -110,7 +110,9 @@ const playerData = [
             player,
             "rank",
             <Link href={`/ranking/${player.rankPages.global}`}>
-              <p className="hover:brightness-50 transition-all transform-gpu">#{formatNumberWithCommas(player.rank)}</p>
+              <p className="hover:brightness-[66%] transition-all transform-gpu">
+                #{formatNumberWithCommas(player.rank)}
+              </p>
             </Link>
           )}
           {rankChange != 0 && renderDailyChange(rankChange, <p>The change in rank compared to yesterday</p>)}
@@ -133,7 +135,7 @@ const playerData = [
             player,
             "countryRank",
             <Link href={`/ranking/${player.country}/${player.rankPages.country}`}>
-              <p className="hover:brightness-50 transition-all transform-gpu">
+              <p className="hover:brightness-[66%] transition-all transform-gpu">
                 #{formatNumberWithCommas(player.countryRank)}
               </p>
             </Link>
@@ -154,7 +156,7 @@ const playerData = [
           {renderChange(
             player,
             "pp",
-            <p className="hover:brightness-50 transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
+            <p className="hover:brightness-[66%] transition-all transform-gpu text-pp">{formatPp(player.pp)}pp</p>
           )}
           {ppChange != 0 && renderDailyChange(ppChange, <p>The change in pp compared to yesterday</p>)}
         </div>
diff --git a/projects/website/src/components/player/player-info.tsx b/projects/website/src/components/player/player-info.tsx
index d4ce7a6..44f7df3 100644
--- a/projects/website/src/components/player/player-info.tsx
+++ b/projects/website/src/components/player/player-info.tsx
@@ -33,7 +33,7 @@ export function PlayerInfo({ player, highlightedPlayer, hideCountryFlag }: Table
         />
       </Avatar>
       {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
-      <Link className="transform-gpu transition-all hover:brightness-50" href={`/player/${player.id}`}>
+      <Link className="transform-gpu transition-all hover:brightness-[66%]" href={`/player/${player.id}`}>
         <p
           className={player.id == highlightedPlayer?.id ? "font-bold" : ""}
           style={{
diff --git a/projects/website/src/components/player/player-scores.tsx b/projects/website/src/components/player/player-scores.tsx
index 5c604ec..1a6c66a 100644
--- a/projects/website/src/components/player/player-scores.tsx
+++ b/projects/website/src/components/player/player-scores.tsx
@@ -199,7 +199,7 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
           {searchTerm && ( // Show clear button only if there's a query
             <button
               onClick={clearSearch}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-50 transform-gpu transition-all cursor-default"
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-[66%] transform-gpu transition-all cursor-default"
               aria-label="Clear search"
             >
               <XMarkIcon className="w-5 h-5" />
diff --git a/projects/website/src/components/ranking/mini.tsx b/projects/website/src/components/ranking/mini.tsx
index 175236c..264ed20 100644
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@@ -97,7 +97,7 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             <Link
               key={index}
               href={`/player/${playerRanking.id}`}
-              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-50 first:rounded-t last:rounded-b"
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-[66%] first:rounded-t last:rounded-b"
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">
diff --git a/projects/website/src/components/score/score-feed/score-feed.tsx b/projects/website/src/components/score/score-feed/score-feed.tsx
index 03abedf..6dd2f3f 100644
--- a/projects/website/src/components/score/score-feed/score-feed.tsx
+++ b/projects/website/src/components/score/score-feed/score-feed.tsx
@@ -47,7 +47,7 @@ export default function ScoreFeed() {
             <p className="text-sm">
               Set by{" "}
               <Link href={`/player/${player.id}`}>
-                <span className="text-pp hover:brightness-50 transition-all transform-gpu">{player.name}</span>
+                <span className="text-pp hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
               </Link>
             </p>
             <Score
diff --git a/projects/website/src/components/score/score-info.tsx b/projects/website/src/components/score/score-info.tsx
index 811ef3a..b16fb84 100644
--- a/projects/website/src/components/score/score-info.tsx
+++ b/projects/website/src/components/score/score-info.tsx
@@ -59,7 +59,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
         <div className="overflow-y-clip">
           <Link
             href={`/leaderboard/${leaderboard.id}`}
-            className="cursor-pointer select-none hover:brightness-50 transform-gpu transition-all text-pp w-fit"
+            className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-pp w-fit"
           >
             {leaderboard.songName} {leaderboard.songSubName}
           </Link>
@@ -67,7 +67,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
             <p className="text-gray-400">{leaderboard.songAuthorName}</p>
             <FallbackLink
               href={mappersProfile}
-              className={mappersProfile && "hover:brightness-50 transform-gpu transition-all w-fit"}
+              className={mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit"}
             >
               {leaderboard.levelAuthorName}
             </FallbackLink>
diff --git a/projects/website/src/components/score/score-rank-info.tsx b/projects/website/src/components/score/score-rank-info.tsx
index a58542d..58b7022 100644
--- a/projects/website/src/components/score/score-rank-info.tsx
+++ b/projects/website/src/components/score/score-rank-info.tsx
@@ -17,7 +17,7 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
       <div className="flex gap-1 items-center">
         <GlobeAmericasIcon className="w-5 h-5" />
         <Link href={`/leaderboard/${leaderboard.id}/${getPageFromRank(score.rank, 12)}`}>
-          <p className="text-pp cursor-default hover:brightness-50 transition-all transform-gpu cursor-pointer">
+          <p className="text-pp cursor-default hover:brightness-[66%] transition-all transform-gpu cursor-pointer">
             #{formatNumberWithCommas(score.rank)}
           </p>
         </Link>
diff --git a/projects/website/src/components/ui/tooltip.tsx b/projects/website/src/components/ui/tooltip.tsx
index 3cfde27..a494702 100644
--- a/projects/website/src/components/ui/tooltip.tsx
+++ b/projects/website/src/components/ui/tooltip.tsx
@@ -2,29 +2,42 @@
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
-
+import { useEffect, useState } from "react";
 import { cn } from "@/common/utils";
+import ReactDOM from "react-dom";
 
 const TooltipProvider = TooltipPrimitive.Provider;
-
 const Tooltip = TooltipPrimitive.Root;
-
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, sideOffset = 4, ...props }, ref) => {
+  const [mounted, setMounted] = useState(false);
+
+  // Ensure the tooltip is rendered after the component has mounted
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // If mounted, render the tooltip using React Portal
+  return mounted
+    ? ReactDOM.createPortal(
+        <TooltipPrimitive.Content
+          ref={ref}
+          sideOffset={sideOffset}
+          className={cn(
+            "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+          )}
+          {...props}
+        />,
+        document.body // Render the tooltip outside the table and its overflow
+      )
+    : null;
+});
+
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };