UX: Update banner to handle responsive images with aspect ratio scaling (#28825)

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

@@ -215,7 +215,9 @@ export default class AboutPage extends Component {
     {{/if}}
     <section class="about__header">
       {{#if @model.banner_image}}
-        <img class="about__banner" src={{@model.banner_image}} />
+        <div class="about__banner">
+          <img class="about__banner-img" src={{@model.banner_image}} />
+        </div>
       {{/if}}
       <h3>{{@model.title}}</h3>
       <p class="short-description">{{@model.description}}</p>
@@ -243,7 +245,7 @@ export default class AboutPage extends Component {
 
         {{#if @model.admins.length}}
           <section class="about__admins">
-            <h3>{{dIcon "users"}} {{i18n "about.our_admins"}}</h3>
+            <h3>{{i18n "about.our_admins"}}</h3>
             <AboutPageUsers @users={{@model.admins}} @truncateAt={{6}} />
           </section>
         {{/if}}
@@ -255,7 +257,7 @@ export default class AboutPage extends Component {
 
         {{#if @model.moderators.length}}
           <section class="about__moderators">
-            <h3>{{dIcon "users"}} {{i18n "about.our_moderators"}}</h3>
+            <h3>{{i18n "about.our_moderators"}}</h3>
             <AboutPageUsers @users={{@model.moderators}} @truncateAt={{6}} />
           </section>
         {{/if}}

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

@@ -13,6 +13,7 @@
   &__left-side {
     flex: 1 1 650px;
   }
+
   &__right-side {
     flex: 1 2 200px;
   }
@@ -38,6 +39,7 @@
 
     @include breakpoint(tablet) {
       margin-bottom: 1em;
+
       &:last-child {
         margin-bottom: 0;
       }
@@ -46,9 +48,19 @@
 
   &__banner {
     margin-bottom: 1em;
-    max-height: 300px;
-    max-width: 100%;
-    object-fit: contain;
+    width: 100%;
+    height: auto; // Let the height scale with the width
+    position: relative; // Ensure the container can handle absolute positioning for the image
+    padding-top: 27.27%; // Maintain the aspect ratio (300px/1100px * 100)
+
+    &-img {
+      position: absolute; // Allow to fill the full space
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover; // Ensures the image fills the container while preserving aspect ratio
+    }
   }
 
   &__activities-item {
@@ -100,9 +112,11 @@ section.about {
     flex-wrap: wrap;
     align-items: center;
     gap: 0 0.35em;
+
     .d-icon {
       color: var(--primary-high);
     }
+
     .badge-category__wrapper {
       font-size: var(--font-0);
       align-self: baseline;
@@ -113,6 +127,7 @@ section.about {
     table {
       td {
         padding: 0.67em;
+
         &:not(:first-child) {
           text-align: center;
         }