From 806db7646cb5239f18e9b098e834aa546e425bb8 Mon Sep 17 00:00:00 2001
From: Gavin Porter <gavporter14@gmail.com>
Date: Thu, 14 Nov 2024 16:45:36 -0500
Subject: [PATCH] centered items on Achievements page (fixes #7782)

---
 .../users-achievements.component.html               |  4 ++--
 .../users-achievements/users-achievements.scss      | 13 +++++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/users/users-achievements/users-achievements.component.html b/src/app/users/users-achievements/users-achievements.component.html
index 8988c3abc6..ff40b83dad 100644
--- a/src/app/users/users-achievements/users-achievements.component.html
+++ b/src/app/users/users-achievements/users-achievements.component.html
@@ -39,7 +39,7 @@ <h3 i18n>My Goals</h3>
       <ng-container *planetBeta>
         <div *ngIf="certifications.length > 0">
           <h3 i18n>My Certifications</h3>
-          <mat-list>
+          <mat-list class="certs-list">
             <mat-list-item *ngFor="let certification of certifications">
               {{certification.name}}
             </mat-list-item>
@@ -79,7 +79,7 @@ <h3 i18n>My Achievements</h3>
       </div>
       <div *ngIf="achievements.references.length > 0">
         <h3 i18n>My References</h3>
-        <mat-list>
+        <mat-list class="references-list">
           <mat-list-item class="mat-list-item-word-wrap" *ngFor="let reference of achievements.references">
             <h4 mat-line>{{reference.name}}</h4>
             <p mat-line *ngIf="reference?.relationship"><ng-container i18n>Relationship:</ng-container> {{reference.relationship}}</p>
diff --git a/src/app/users/users-achievements/users-achievements.scss b/src/app/users/users-achievements/users-achievements.scss
index f99e871f44..2a97338319 100644
--- a/src/app/users/users-achievements/users-achievements.scss
+++ b/src/app/users/users-achievements/users-achievements.scss
@@ -5,6 +5,18 @@
   margin: 0 auto;
   text-align: center;
 
+  .references-list {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .certs-list .mat-list-item{
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
   & mat-list, & ul, & ol {
     text-align: left;
   }
@@ -73,6 +85,7 @@
   margin-right: 1rem
 }
 
+
 @media (max-width: $screen-sm) {
   .responsive-toolbar {
     display: flex;