UX: Display full-page user search in a grid (#14636)

Two reasons for this change:
1. Better utilization of the screen space (i.e. displaying more than 5 entries on a 13" display)
2. Making user link elements smaller fixes user-card positioning (it no longer displays far to the right, away from the user name/avatar)

app/assets/javascripts/discourse/app/templates/full-page-search.hbs

@@ -144,7 +144,6 @@
               {{/unless}}
 
               {{#if hasResults}}
-                {{#unless loading}}
                 <h3 class="search-footer">
                   {{#if model.grouped_search_result.more_full_page_results}}
                     {{#if isLastPage}}
@@ -154,7 +153,6 @@
                     {{i18n "search.no_more_results"}}
                   {{/if}}
                 </h3>
-                {{/unless}}
               {{/if}}
             {{/conditional-loading-spinner}}
           {{else}}
@@ -175,6 +173,7 @@
                   <h4 class="tag-heading">
                     {{i18n "search.tags"}}
                   </h4>
+
                   <div class="tag-items">
                     {{#each model.tags as |tag|}}
                       <div class="fps-tag-item">
@@ -187,28 +186,31 @@
                 {{/if}}
 
                 {{#if model.users}}
+                  <div class="user-items">
                     {{#each model.users as |user|}}
                       {{#user-link user=user class="fps-user-item"}}
                         {{avatar user imageSize="large"}}
+
                         <div class="user-titles">
                           {{#if user.name}}
                             <span class="name">
                               {{user.name}}
                             </span>
                           {{/if}}
+
                           <span class="username">
                             {{user.username}}
                           </span>
                         </div>
                       {{/user-link}}
                     {{/each}}
+                  </div>
                 {{/if}}
               {{else}}
                 {{#if searchActive}}
                   <h3>{{i18n "search.no_results"}}</h3>
                 {{/if}}
               {{/if}}
-
             {{/conditional-loading-spinner}}
           {{/if}}
         {{/load-more}}

app/assets/stylesheets/common/base/search.scss

@@ -1,9 +1,11 @@
 @mixin search-page-spacing {
-  padding: 1rem 10%;
+  padding: 2rem 10%;
+
   @include breakpoint(medium) {
     padding: 1rem;
   }
 }
+
 .search-highlight {
   font-weight: bold;
 }
@@ -61,6 +63,7 @@
 
   .search-advanced {
     position: relative;
+
     .search-actions,
     .search-title,
     .search-bar {
@@ -69,7 +72,6 @@
 
     .search-results {
       @include search-page-spacing();
-      padding-bottom: 3em;
     }
 
     .search-info {
@@ -122,6 +124,24 @@
     margin-top: 1em;
   }
 
+  .user-items {
+    display: grid;
+    gap: 2em 1em;
+    grid: auto-flow / repeat(4, 1fr);
+
+    @include breakpoint(medium) {
+      grid: auto-flow / repeat(3, 1fr);
+    }
+
+    @include breakpoint(tablet) {
+      grid: auto-flow / 1fr 1fr;
+    }
+
+    @include breakpoint(mobile-large) {
+      grid: auto-flow / 1fr;
+    }
+  }
+
   .search-filters {
     background: var(--primary-very-low);
     display: flex;
@@ -333,10 +353,10 @@
 
 .search-results {
   .fps-user-item {
-    margin-bottom: 1.5em;
     display: flex;
     flex-direction: row;
     align-items: center;
+
     .avatar {
       margin-right: 0.5em;
       min-width: 25px;