From a87ae908571b11df20c242158c6afa34328e4a08 Mon Sep 17 00:00:00 2001
From: Mubashir21 <mubashirshoukat@gmail.com>
Date: Mon, 9 Mar 2026 18:29:57 +0300
Subject: [PATCH] fix(profile): fix pb table hover overlay flickering and not
 covering content (@Mubashir21)

---
 frontend/src/ts/components/pages/profile/UserProfile.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/pages/profile/UserProfile.tsx b/frontend/src/ts/components/pages/profile/UserProfile.tsx
index af7a0d7c69b5..6b0ce172f8b6 100644
--- a/frontend/src/ts/components/pages/profile/UserProfile.tsx
+++ b/frontend/src/ts/components/pages/profile/UserProfile.tsx
@@ -8,6 +8,7 @@ import { createMemo, For, JSXElement, Show } from "solid-js";
 
 import * as PbTablesModal from "../../../modals/pb-tables";
 import { getConfig } from "../../../signals/config";
+import { cn } from "../../../utils/cn";
 import { Formatting } from "../../../utils/format";
 import { formatTopPercentage } from "../../../utils/misc";
 import { Button } from "../../common/Button";
@@ -126,8 +127,10 @@ function PbTable<M extends "time" | "words">(props: {
       <div class="grid grid-cols-2 gap-8 p-4 md:grid-cols-4">
         <For each={bests()}>
           {(item) => (
-            <div class="grid items-center">
-              <div class="col-start-1 row-start-1 text-center">
+            <div
+              class={cn("grid items-center", item.pb !== undefined && "group")}
+            >
+              <div class="col-start-1 row-start-1 text-center transition-opacity group-hover:opacity-0">
                 <div class="text-xs text-sub">
                   {item.mode2} {props.mode === "time" ? "seconds" : "words"}
                 </div>
@@ -143,7 +146,7 @@ function PbTable<M extends "time" | "words">(props: {
                 </div>
               </div>
               <Show when={item.pb !== undefined}>
-                <div class="col-start-1 row-start-1 grid bg-sub-alt text-center text-xs opacity-0 transition-opacity hover:opacity-100">
+                <div class="col-start-1 row-start-1 grid h-full bg-sub-alt text-center text-xs opacity-0 transition-opacity group-hover:opacity-100">
                   <div class="text-sub">
                     {item.mode2} {props.mode === "time" ? "seconds" : "words"}
                   </div>