From 4ec9a947dc84d01089d03f67de1acdf6db13ab9b Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 18 May 2023 11:16:21 +0900
Subject: [PATCH] UX: Improve display of short site description in header
 dropdown (#21628)

---
 .../app/components/sidebar/common/custom-section.hbs      | 8 +-------
 .../discourse/app/components/sidebar/section.hbs          | 6 ++++++
 .../discourse/app/lib/sidebar/community-section.js        | 8 ++++++--
 app/assets/stylesheets/desktop/menu-panel.scss            | 4 ++++
 app/assets/stylesheets/mobile/menu-panel.scss             | 4 ----
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs
index bf4da6d19dd..6f8e3bce36a 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/common/custom-section.hbs
@@ -5,14 +5,8 @@
   @headerActions={{this.section.headerActions}}
   @headerActionsIcon={{this.section.headerActionIcon}}
   @class={{this.section.dragCss}}
+  @sectionDescription={{this.section.description}}
 >
-
-  {{#if this.section.displayShortSiteDescription}}
-    <Sidebar::SectionMessage>
-      {{this.siteSettings.short_site_description}}
-    </Sidebar::SectionMessage>
-  {{/if}}
-
   {{#each this.section.links as |link|}}
     {{#if link.shouldDisplay}}
       {{#if link.external}}
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
index 2f3baf8ebde..570b4415196 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/section.hbs
@@ -44,6 +44,12 @@
       {{/if}}
     </div>
 
+    {{#if @sectionDescription}}
+      <Sidebar::SectionMessage>
+        {{@sectionDescription}}
+      </Sidebar::SectionMessage>
+    {{/if}}
+
     {{#if this.displaySectionContent}}
       <ul class="sidebar-section-content" id={{this.sidebarSectionContentID}}>
         {{yield}}
diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js b/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js
index 6b158e1fd8a..29643939af9 100644
--- a/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js
+++ b/app/assets/javascripts/discourse/app/lib/sidebar/community-section.js
@@ -131,8 +131,12 @@ export default class CommunitySection {
     });
   }
 
-  get displayShortSiteDescription() {
-    return !this.currentUser && !!this.siteSettings.short_site_description;
+  get description() {
+    if (!this.currentUser && !!this.siteSettings.short_site_description) {
+      return this.siteSettings.short_site_description;
+    } else {
+      return "";
+    }
   }
 
   get decoratedTitle() {
diff --git a/app/assets/stylesheets/desktop/menu-panel.scss b/app/assets/stylesheets/desktop/menu-panel.scss
index 7c2b73c38a7..531161eb0a8 100644
--- a/app/assets/stylesheets/desktop/menu-panel.scss
+++ b/app/assets/stylesheets/desktop/menu-panel.scss
@@ -52,6 +52,10 @@
         }
       }
     }
+
+    .sidebar-section-message {
+      padding: 0;
+    }
   }
 
   .sidebar-custom-sections .d-icon-globe {
diff --git a/app/assets/stylesheets/mobile/menu-panel.scss b/app/assets/stylesheets/mobile/menu-panel.scss
index c5d8a744704..e7352a32e7f 100644
--- a/app/assets/stylesheets/mobile/menu-panel.scss
+++ b/app/assets/stylesheets/mobile/menu-panel.scss
@@ -52,10 +52,6 @@
       padding-top: 0;
       padding-bottom: 0.25em;
     }
-
-    .sidebar-section-message {
-      padding: 0;
-    }
   }
 
   .sidebar-section-wrapper {