fix(profile): prevent PB hover details from overlapping base values (@AzureNightlock)

frontend/src/ts/components/pages/profile/UserProfile.tsx

@@ -126,8 +126,14 @@ 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="group grid items-center">
+              <div
+                class={
+                  item.pb !== undefined
+                    ? "col-start-1 row-start-1 text-center transition-opacity group-hover:opacity-0"
+                    : "col-start-1 row-start-1 text-center"
+                }
+              >
                 <div class="text-xs text-sub">
                   {item.mode2} {props.mode === "time" ? "seconds" : "words"}
                 </div>
@@ -142,8 +148,9 @@ 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 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>

frontend/storybook/stories/UserProfile.stories.tsx

@@ -0,0 +1,240 @@
+import preview from "#.storybook/preview";
+import { UserProfile as UserProfileType } from "@monkeytype/schemas/users";
+
+import { UserProfile } from "../../src/ts/components/pages/profile/UserProfile";
+
+const baseProfile: UserProfileType = {
+  uid: "user123",
+  name: "monkeytyper",
+  addedAt: 1700000000000,
+  xp: 42000,
+  streak: 15,
+  maxStreak: 30,
+  isPremium: false,
+  banned: false,
+  lbOptOut: false,
+  typingStats: {
+    completedTests: 1234,
+    startedTests: 1500,
+    timeTyping: 360000,
+  },
+  personalBests: {
+    time: {
+      "15": [
+        {
+          acc: 97.5,
+          consistency: 82.3,
+          difficulty: "normal",
+          language: "english",
+          raw: 145,
+          wpm: 138,
+          timestamp: 1700000000000,
+        },
+      ],
+      "30": [
+        {
+          acc: 96.2,
+          consistency: 80.1,
+          difficulty: "normal",
+          language: "english",
+          raw: 140,
+          wpm: 132,
+          timestamp: 1699000000000,
+        },
+      ],
+      "60": [
+        {
+          acc: 95.8,
+          consistency: 78.5,
+          difficulty: "normal",
+          language: "english",
+          raw: 135,
+          wpm: 125,
+          timestamp: 1698000000000,
+        },
+      ],
+      "120": [],
+    },
+    words: {
+      "10": [
+        {
+          acc: 100,
+          consistency: 90.0,
+          difficulty: "normal",
+          language: "english",
+          raw: 160,
+          wpm: 155,
+          timestamp: 1700000000000,
+        },
+      ],
+      "25": [
+        {
+          acc: 98.0,
+          consistency: 85.0,
+          difficulty: "normal",
+          language: "english",
+          raw: 150,
+          wpm: 142,
+          timestamp: 1699000000000,
+        },
+      ],
+      "50": [
+        {
+          acc: 96.5,
+          consistency: 81.0,
+          difficulty: "normal",
+          language: "english",
+          raw: 142,
+          wpm: 130,
+          timestamp: 1698000000000,
+        },
+      ],
+      "100": [
+        {
+          acc: 95.0,
+          consistency: 79.0,
+          difficulty: "normal",
+          language: "english",
+          raw: 138,
+          wpm: 122,
+          timestamp: 1697000000000,
+        },
+      ],
+    },
+  },
+  details: {
+    bio: "Just a monkey typing away",
+    keyboard: "Custom 65%",
+    socialProfiles: {
+      twitter: "monkeytyper",
+      github: "monkeytyper",
+      website: "https://example.com",
+    },
+  },
+  // this is styled using global styles so it wont show up correctly in storybook
+  // testActivity: {
+  //   testsByDays: [
+  //     null,
+  //     2,
+  //     5,
+  //     null,
+  //     3,
+  //     8,
+  //     12,
+  //     null,
+  //     null,
+  //     1,
+  //     4,
+  //     6,
+  //     null,
+  //     7,
+  //     3,
+  //     null,
+  //     null,
+  //     5,
+  //     9,
+  //     2,
+  //     null,
+  //     null,
+  //     4,
+  //     6,
+  //     11,
+  //     3,
+  //     null,
+  //     8,
+  //     2,
+  //     5,
+  //   ],
+  //   lastDay: 1700000000000,
+  // },
+  inventory: {
+    badges: [{ id: 1, selected: true }],
+  },
+};
+
+const meta = preview.meta({
+  title: "Pages/UserProfile",
+  component: UserProfile,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+});
+
+export const Default = meta.story({
+  args: {
+    profile: baseProfile,
+  },
+});
+
+export const AccountPage = meta.story({
+  args: {
+    profile: baseProfile,
+    isAccountPage: true,
+  },
+});
+
+export const WithLeaderboard = meta.story({
+  args: {
+    profile: {
+      ...baseProfile,
+      allTimeLbs: {
+        time: {
+          "15": {
+            english: {
+              rank: 42,
+              count: 50000,
+            },
+          },
+          "60": {
+            english: {
+              rank: 156,
+              count: 50000,
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+export const Banned = meta.story({
+  args: {
+    profile: {
+      ...baseProfile,
+      banned: true,
+      details: undefined,
+      inventory: undefined,
+    },
+  },
+});
+
+export const LbOptOut = meta.story({
+  args: {
+    profile: {
+      ...baseProfile,
+      lbOptOut: true,
+    },
+  },
+});
+
+export const NoPbs = meta.story({
+  args: {
+    profile: {
+      ...baseProfile,
+      personalBests: {
+        time: {},
+        words: {},
+      },
+    },
+  },
+});
+
+export const Premium = meta.story({
+  args: {
+    profile: {
+      ...baseProfile,
+      isPremium: true,
+    },
+  },
+});