People page pagination list aligned center.

Author: mdermentzi

modules/portal/app/assets/css/portal/_style.scss

@@ -1031,6 +1031,9 @@ ul.pagination {
   }
 }
 
+.people-page .pagination {
+  justify-content: center;
+}
 
 // User grid
 .user-grid {
@@ -1047,12 +1050,17 @@ ul.pagination {
 
   .user-info {
     .img-container {
-      img {
+      .user-avatar {
         border-radius: 50%;
         width: 8rem;
         height: 8rem;
         overflow: hidden;
-        object-fit: cover;
+        display: inline-block;
+        img {
+          object-fit: cover;
+          width: 100%;
+          height: 100%;
+        }
       }
     }
     text-align: center;

modules/portal/app/views/userProfile/browseUsers.scala.html

@@ -12,14 +12,16 @@
         @if(result.params.isFiltered || result.nonEmpty) {
             @helper.form(action = searchAction, 'role -> "form") {
                 @views.html.common.search.searchBar(result.params, tips = false)
-
-                <ul class="user-grid">
-                    @result.page.map { case (user, hit) =>
+                <div class="people-page">
+                    <ul class="user-grid">
+                        @result.page.map { case (user, hit) =>
                         <li class="user-grid-item user-info">
                             <div class="user-info-details">
                                 <a href="@controllers.portal.social.routes.Social.userProfile(user.id)" class="gravitar img-container">
                                     <span class="helper"></span>
-                                    <img alt="Image" width="100%" height="auto" src="@views.Helpers.gravitar(user.data.imageUrl)" />
+                                    <div class="user-avatar">
+                                        <img alt="Image" width="100%" height="auto" src="@views.Helpers.gravitar(user.data.imageUrl)" />
+                                    </div>
                                 </a>
                                 <h3><a class="name" href="@controllers.portal.social.routes.Social.userProfile(user.id)">@user.toStringLang</a></h3>
                                 @userInfo {
@@ -37,9 +39,10 @@ <h3><a class="name" href="@controllers.portal.social.routes.Social.userProfile(u
                                 }
                             </div>
                         </li>
-                    }
-                </ul>
-                @common.pagination(result.page)
+                        }
+                    </ul>
+                    @common.pagination(result.page)
+                </div>
             }
         }
     }