fix

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"

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>

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>