achievements: smoother certifications (fixes #7975)

open-learning-exchange · Dec 23, 2024 · 169cff2 · 169cff2
1 parent 97fc1bb
commit 169cff2
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git 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
@@ -10,10 +10,17 @@
     text-align: center;
   }
 
-  .certs-list .mat-list-item{
-    display: flex;
-    justify-content: center;
-    text-align: center;
+  .certs-list {
+    .mat-list-item {
+      width:100%;
+    }
+    .cert-item {
+      display: block;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   & mat-list, & ul, & ol {