UX: Tweak styling for the new /about page (#28367)

Various tweaks the new /about page. Main change is to make it display 3 columns of users instead of 2 when there's enough space.

app/assets/javascripts/discourse/app/components/about-page.gjs

@@ -153,7 +153,7 @@ export default class AboutPage extends Component {
       />
     </section>
     <div class="about__main-content">
-      <section class="about__left-side">
+      <div class="about__left-side">
         <div class="about__stats">
           {{#each this.stats as |stat|}}
             <span class="about__stats-item {{stat.class}}">
@@ -168,18 +168,18 @@ export default class AboutPage extends Component {
         {{#if @model.admins.length}}
           <section class="about__admins">
             <h3>{{dIcon "users"}} {{i18n "about.our_admins"}}</h3>
-            <AboutPageUsers @users={{@model.admins}} @truncateAt={{10}} />
+            <AboutPageUsers @users={{@model.admins}} @truncateAt={{12}} />
           </section>
         {{/if}}
 
         {{#if @model.moderators.length}}
           <section class="about__moderators">
             <h3>{{dIcon "users"}} {{i18n "about.our_moderators"}}</h3>
-            <AboutPageUsers @users={{@model.moderators}} @truncateAt={{10}} />
+            <AboutPageUsers @users={{@model.moderators}} @truncateAt={{12}} />
           </section>
         {{/if}}
-      </section>
-      <section class="about__right-side">
+      </div>
+      <div class="about__right-side">
         <h3>{{i18n "about.contact"}}</h3>
         {{#if this.contactInfo}}
           <p>{{htmlSafe this.contactInfo}}</p>
@@ -203,7 +203,7 @@ export default class AboutPage extends Component {
             </div>
           {{/each}}
         </div>
-      </section>
+      </div>
     </div>
   </template>
 }

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

@@ -2,7 +2,7 @@
   &__main-content {
     display: grid;
     grid-template-columns: 2.5fr 1fr;
-    column-gap: 4em;
+    column-gap: 2em;
   }
 
   &__stats {
@@ -51,7 +51,7 @@
 .about-page-users-list {
   display: grid;
   gap: 1em;
-  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
 
   &__expand-button {
     width: 100%;

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

@@ -5,7 +5,9 @@
   background: var(--d-content-background);
   .about-page & {
     max-width: unset;
-    section:not(.admins):not(.moderators):not(.category-moderators) {
+    section:not(.admins):not(.moderators):not(.category-moderators):not(
+        .about__admins
+      ):not(.about__moderators) {
       max-width: 700px;
     }
     .about.category-moderators {

spec/system/about_page_spec.rb

@@ -182,9 +182,9 @@ describe "About page", type: :system do
     describe "our admins section" do
       before { User.update_all(last_seen_at: 1.month.ago) }
 
-      fab!(:admins) { Fabricate.times(12, :admin) }
+      fab!(:admins) { Fabricate.times(14, :admin) }
 
-      it "displays only the 10 most recently seen admins when there are more than 10 admins" do
+      it "displays only the 12 most recently seen admins when there are more than 12 admins" do
         admins[0].update!(last_seen_at: 4.minutes.ago)
         admins[1].update!(last_seen_at: 1.minutes.ago)
         admins[2].update!(last_seen_at: 10.minutes.ago)
@@ -193,7 +193,7 @@ describe "About page", type: :system do
         expect(about_page.admins_list).to have_expand_button
 
         displayed_admins = about_page.admins_list.users
-        expect(displayed_admins.size).to eq(10)
+        expect(displayed_admins.size).to eq(12)
         expect(displayed_admins.map { |u| u[:username] }.first(3)).to eq(
           [admins[1].username, admins[0].username, admins[2].username],
         )
@@ -203,7 +203,7 @@ describe "About page", type: :system do
         about_page.visit
 
         displayed_admins = about_page.admins_list.users
-        expect(displayed_admins.size).to eq(10)
+        expect(displayed_admins.size).to eq(12)
 
         expect(about_page.admins_list).to be_expandable
 
@@ -212,23 +212,23 @@ describe "About page", type: :system do
         expect(about_page.admins_list).to be_collapsible
 
         displayed_admins = about_page.admins_list.users
-        expect(displayed_admins.size).to eq(13) # 12 fabricated for this spec group and 1 global
+        expect(displayed_admins.size).to eq(15) # 14 fabricated for this spec group and 1 global
 
         about_page.admins_list.collapse
 
         expect(about_page.admins_list).to be_expandable
 
         displayed_admins = about_page.admins_list.users
-        expect(displayed_admins.size).to eq(10)
+        expect(displayed_admins.size).to eq(12)
       end
 
-      it "doesn't show an expand/collapse button when there are fewer than 10 admins" do
+      it "doesn't show an expand/collapse button when there are fewer than 12 admins" do
         User.where(id: admins.first(7).map(&:id)).destroy_all
 
         about_page.visit
 
         displayed_admins = about_page.admins_list.users
-        expect(displayed_admins.size).to eq(6)
+        expect(displayed_admins.size).to eq(8)
         expect(about_page.admins_list).to have_no_expand_button
       end
 
@@ -273,9 +273,9 @@ describe "About page", type: :system do
     describe "our moderators section" do
       before { User.update_all(last_seen_at: 1.month.ago) }
 
-      fab!(:moderators) { Fabricate.times(13, :moderator) }
+      fab!(:moderators) { Fabricate.times(15, :moderator) }
 
-      it "displays only the 10 most recently seen moderators when there are more than 10 moderators" do
+      it "displays only the 12 most recently seen moderators when there are more than 12 moderators" do
         moderators[10].update!(last_seen_at: 5.hours.ago)
         moderators[3].update!(last_seen_at: 2.hours.ago)
         moderators[5].update!(last_seen_at: 13.hours.ago)
@@ -284,7 +284,7 @@ describe "About page", type: :system do
         expect(about_page.moderators_list).to have_expand_button
 
         displayed_mods = about_page.moderators_list.users
-        expect(displayed_mods.size).to eq(10)
+        expect(displayed_mods.size).to eq(12)
         expect(displayed_mods.map { |u| u[:username] }.first(3)).to eq(
           [moderators[3].username, moderators[10].username, moderators[5].username],
         )
@@ -294,7 +294,7 @@ describe "About page", type: :system do
         about_page.visit
 
         displayed_mods = about_page.moderators_list.users
-        expect(displayed_mods.size).to eq(10)
+        expect(displayed_mods.size).to eq(12)
 
         expect(about_page.moderators_list).to be_expandable
 
@@ -303,23 +303,23 @@ describe "About page", type: :system do
         expect(about_page.moderators_list).to be_collapsible
 
         displayed_mods = about_page.moderators_list.users
-        expect(displayed_mods.size).to eq(14) # 13 fabricated for this spec group and 1 global
+        expect(displayed_mods.size).to eq(16) # 15 fabricated for this spec group and 1 global
 
         about_page.moderators_list.collapse
 
         expect(about_page.moderators_list).to be_expandable
 
         displayed_mods = about_page.moderators_list.users
-        expect(displayed_mods.size).to eq(10)
+        expect(displayed_mods.size).to eq(12)
       end
 
-      it "doesn't show an expand/collapse button when there are fewer than 10 moderators" do
+      it "doesn't show an expand/collapse button when there are fewer than 12 moderators" do
         User.where(id: moderators.first(10).map(&:id)).destroy_all
 
         about_page.visit
 
         displayed_mods = about_page.moderators_list.users
-        expect(displayed_mods.size).to eq(4)
+        expect(displayed_mods.size).to eq(6)
         expect(about_page.moderators_list).to have_no_expand_button
       end