From 741c194bb8dd20cefd48db99be7ec07120c5d65b Mon Sep 17 00:00:00 2001
From: Sheldan <5037282+Sheldan@users.noreply.github.com>
Date: Wed, 27 Mar 2024 22:24:38 +0100
Subject: [PATCH] [AB-xxx] changing styling for smaller screens for member
 display to truncate the name prepare for release

---
 .env                                                   |  2 +-
 .../src/components/LeaderboardEntry.tsx                | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/.env b/.env
index 3fbf13d8a..911a52cdc 100644
--- a/.env
+++ b/.env
@@ -1,2 +1,2 @@
 REGISTRY_PREFIX=harbor.sheldan.dev/abstracto/
-VERSION=1.5.32
\ No newline at end of file
+VERSION=1.5.33
\ No newline at end of file
diff --git a/ui/experience-tracking/src/components/LeaderboardEntry.tsx b/ui/experience-tracking/src/components/LeaderboardEntry.tsx
index 8dd278c96..9e36482f6 100644
--- a/ui/experience-tracking/src/components/LeaderboardEntry.tsx
+++ b/ui/experience-tracking/src/components/LeaderboardEntry.tsx
@@ -8,7 +8,7 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
     let memberDisplay = memberExists ? <>
         <img alt={member.member!.name} src={member.member!.avatarUrl}
                     className="object-contain h-16 w-16 rounded-full"/>
-        <span className="align-middle" style={{color: nameColor}}>{member.member!.name}</span>
+        <span className="align-middle max-[480px]:max-w-48 truncate" style={{color: nameColor}}>{member.member!.name}</span>
     </> :
         <span className="inline-flex items-center h-16">
             {member.id.toString()}
@@ -20,16 +20,16 @@ export const LeaderboardEntry = ({member, index}: { member: ExperienceMember, in
                     className="text-center">
                     {member.rank}
                 </td>
-                <td className="px-2 py-4 font-medium whitespace-nowrap text-white flex items-center gap-3">
+                <td className="px-2 py-3 font-medium whitespace-nowrap text-white flex items-center gap-2">
                     {memberDisplay}
                 </td>
-                <td className="px-6 py-4 text-center">
+                <td className="px-1 py-3 text-center">
                     {member.experience.toLocaleString()}
                 </td>
-                <td className="px-6 py-4 text-center">
+                <td className="px-1 py-3 text-center">
                     {member.messages.toLocaleString()}
                 </td>
-                <td className="px-6 py-4 text-center">
+                <td className="px-2 py-3 text-center">
                     {member.level.toString()}
                 </td>
             </tr>