diff --git a/app/assets/javascripts/discourse/app/components/about-page.gjs b/app/assets/javascripts/discourse/app/components/about-page.gjs index e9a7059fed3..78be9620a0d 100644 --- a/app/assets/javascripts/discourse/app/components/about-page.gjs +++ b/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}} diff --git a/app/assets/stylesheets/common/base/about.scss b/app/assets/stylesheets/common/base/about.scss index 0902d704303..fb61666a5d9 100644 --- a/app/assets/stylesheets/common/base/about.scss +++ b/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; }