From 6bbf628ab576bdbd4a73fd0637408ec99ee6eb87 Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Wed, 23 Oct 2024 08:36:55 +0100
Subject: [PATCH] fix

---
 .../website/src/components/player/player-info.tsx     | 11 +++++++++--
 projects/website/src/components/ranking/mini.tsx      |  8 +++++++-
 .../website/src/components/ranking/player-ranking.tsx |  4 ++--
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/projects/website/src/components/player/player-info.tsx b/projects/website/src/components/player/player-info.tsx
index d1f7032..f2a716b 100644
--- a/projects/website/src/components/player/player-info.tsx
+++ b/projects/website/src/components/player/player-info.tsx
@@ -18,6 +18,11 @@ type TablePlayerProps = {
    */
   highlightedPlayer?: ScoreSaberPlayerToken | ScoreSaberPlayer;
 
+  /**
+   * The additional class names
+   */
+  className?: string;
+
   /**
    * Hide the country flag
    */
@@ -37,6 +42,7 @@ type TablePlayerProps = {
 export function PlayerInfo({
   player,
   highlightedPlayer,
+  className,
   hideCountryFlag,
   useLink,
   hoverBrightness = true,
@@ -46,7 +52,8 @@ export function PlayerInfo({
       className={clsx(
         hoverBrightness ? "transform-gpu transition-all hover:brightness-[66%]" : "",
         player.id == highlightedPlayer?.id ? "font-bold" : "",
-        "text-ellipsis overflow-hidden whitespace-nowrap"
+        `text-ellipsis max-w-[250px] overflow-hidden whitespace-nowrap break-all`,
+        className
       )}
       style={{
         color: getScoreSaberRole(player)?.color,
@@ -57,7 +64,7 @@ export function PlayerInfo({
   );
 
   return (
-    <div className="flex gap-2 items-center w-[175px]">
+    <div className="flex gap-2 items-center">
       <Avatar className="w-[24px] h-[24px] pointer-events-none">
         <AvatarImage
           alt="Profile Picture"
diff --git a/projects/website/src/components/ranking/mini.tsx b/projects/website/src/components/ranking/mini.tsx
index 1234dd1..d1689c7 100644
--- a/projects/website/src/components/ranking/mini.tsx
+++ b/projects/website/src/components/ranking/mini.tsx
@@ -92,7 +92,13 @@ export default function Mini({ type, player, shouldUpdate }: MiniProps) {
             >
               <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
               <div className="flex gap-2 items-center">
-                <PlayerInfo player={playerRanking} highlightedPlayer={player} hideCountryFlag hoverBrightness={false} />
+                <PlayerInfo
+                  className="w-[145px]"
+                  player={playerRanking}
+                  highlightedPlayer={player}
+                  hideCountryFlag
+                  hoverBrightness={false}
+                />
               </div>
               <div className="inline-flex min-w-[13em] gap-2 items-center">
                 <p className="text-ssr text-right">{formatPp(playerRanking.pp)}pp</p>
diff --git a/projects/website/src/components/ranking/player-ranking.tsx b/projects/website/src/components/ranking/player-ranking.tsx
index 8f835b4..e54d11c 100644
--- a/projects/website/src/components/ranking/player-ranking.tsx
+++ b/projects/website/src/components/ranking/player-ranking.tsx
@@ -21,11 +21,11 @@ export function PlayerRanking({ player, isCountry }: PlayerRankingProps) {
 
   return (
     <>
-      <td className="px-4 py-2">
+      <td className="px-3 py-2">
         #{formatNumberWithCommas(isCountry ? player.countryRank : player.rank)}{" "}
         <span className="text-sm">{isCountry && "(#" + formatNumberWithCommas(player.rank) + ")"}</span>
       </td>
-      <td className="flex items-center gap-2 px-4 py-2">
+      <td className="flex items-center gap-2 pl-3 py-2">
         <PlayerInfo player={player} highlightedPlayer={claimedPlayer} useLink />
       </td>
       <td className="px-4 py-2 text-ssr text-center">{formatPp(player.pp)}pp</td>