From fe5d6d0cc55dcc3b8c559b0f6400ecb7d3dc96d2 Mon Sep 17 00:00:00 2001
From: Gavin Porter <112116086+Gavinp14@users.noreply.github.com>
Date: Fri, 27 Dec 2024 13:25:32 -0500
Subject: [PATCH] mylife: smoother achievements certifications (fixes #7975)
 (#7995)

Co-authored-by: Mutugi <48474421+Mutugiii@users.noreply.github.com>
Co-authored-by: dogi <dogi@users.noreply.github.com>
---
 package.json                                           |  2 +-
 .../users-achievements.component.html                  |  2 +-
 .../users/users-achievements/users-achievements.scss   | 10 ++++++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 67bedc05bf..81dd2eb708 100755
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.16.23",
+  "version": "0.16.24",
   "myplanet": {
     "latest": "v0.21.55",
     "min": "v0.20.55"
diff --git a/src/app/users/users-achievements/users-achievements.component.html b/src/app/users/users-achievements/users-achievements.component.html
index 4f2f70d554..55b80d2471 100644
--- a/src/app/users/users-achievements/users-achievements.component.html
+++ b/src/app/users/users-achievements/users-achievements.component.html
@@ -47,7 +47,7 @@ <h3 i18n>My Goals</h3>
           <h3 i18n>My Certifications</h3>
           <mat-list class="certs-list">
             <mat-list-item *ngFor="let certification of certifications">
-              {{certification.name}}
+              <span class="cert-item">{{certification.name}}</span>
             </mat-list-item>
           </mat-list>
         </div>
diff --git a/src/app/users/users-achievements/users-achievements.scss b/src/app/users/users-achievements/users-achievements.scss
index c280f57f51..782c8baf52 100644
--- a/src/app/users/users-achievements/users-achievements.scss
+++ b/src/app/users/users-achievements/users-achievements.scss
@@ -10,10 +10,12 @@
     text-align: center;
   }
 
-  .certs-list .mat-list-item{
-    display: flex;
-    justify-content: center;
-    text-align: center;
+  .certs-list {
+    .cert-item {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   & mat-list, & ul, & ol {