chore: truncate leaderboard item

Author: sifferhans

frontend/app/components/leaderboard/LeaderboardItem.vue

@@ -12,7 +12,10 @@ const colorClasses = [
   { light: 'text-[#C47E49]!', dark: 'text-[#512012]!' },
 ]
 
-const getColorClasses = (rank: number | undefined, mode: 'dark' | 'light') => {
+const getColorClasses = (
+  rank: number | undefined | null,
+  mode: 'dark' | 'light',
+) => {
   if (!rank) return
   const color = colorClasses[rank - 1]
   if (color) {
@@ -45,11 +48,11 @@ const getColorClasses = (rank: number | undefined, mode: 'dark' | 'light') => {
       />
       <span class="col-span-full row-span-full">{{ item.rank }}</span>
     </div>
-    <div class="grow">
+    <div class="grow truncate">
       <div class="flex gap-2">
         <p
           :class="[
-            'text-label',
+            'text-label truncate',
             { 'text-accent-contrast': isMe, 'text-text-default': !isMe },
           ]"
         >
@@ -70,7 +73,7 @@ const getColorClasses = (rank: number | undefined, mode: 'dark' | 'light') => {
         <Icon name="lucide:badge-check" class="size-3.5" />
         <span>{{ badge }}</span>
       </p>
-      <p v-else-if="item.description" class="text-caption text-muted">
+      <p v-else-if="item.description" class="text-caption text-muted truncate">
         {{ item.description }}
       </p>
     </div>

frontend/app/components/standings/StandingsLocal.vue

@@ -77,12 +77,12 @@ const leaderboard = computed<Partial<LeaderboardEntry>[]>(() => {
         v-model="entityType"
         :tabs="[
           {
-            label: 'People',
+            label: $t('standings.personal'),
             value: LeaderboardEntityType.Persons,
             icon: 'IconUser',
           },
           {
-            label: 'Units',
+            label: $t('standings.units'),
             value: LeaderboardEntityType.Teams,
             icon: 'IconUsers',
           },

frontend/i18n/locales/en.json

@@ -30,7 +30,9 @@
     "local": "Local",
     "you": "You",
     "pointHistoryButton": "Point history",
-    "getPointsButton": "Get points"
+    "getPointsButton": "Get points",
+    "units": "Units",
+    "personal": "Personal"
   },
   "unit": {
     "unitLeader": "Unit leader",

frontend/i18n/locales/nb.json

@@ -30,7 +30,9 @@
     "local": "Lokalt",
     "you": "Deg",
     "pointHistoryButton": "Poenghistorikk",
-    "getPointsButton": "Få poeng"
+    "getPointsButton": "Få poeng",
+    "units": "Units",
+    "personal": "Personlig"
   },
   "unit": {
     "editUnit": "Rediger unit",