UX: Use full width when displaying a single recommendations list. (#22896)

app/assets/javascripts/discourse/app/components/more-topics.hbs

@@ -1,6 +1,5 @@
 <div
-  class="more-content-wrapper
+  class="more-content-wrapper {{if this.singleList 'single-list'}}"
-    {{if this.showTitleOnMobile 'mobile-single-list'}}"
   {{did-insert this.buildListPills}}
 >
   {{#if this.showTopicListsNav}}

app/assets/javascripts/discourse/app/components/more-topics.js

@@ -15,10 +15,6 @@ export default class MoreTopics extends Component {
     return this.site.mobileView && !this.singleList;
   }
 
-  get showTitleOnMobile() {
-    return this.site.mobileView && this.singleList;
-  }
-
   @action
   rememberTopicListPreference(value) {
     this.moreTopicsPreferenceTracking.updatePreference(value);
@@ -28,10 +24,6 @@ export default class MoreTopics extends Component {
 
   @action
   buildListPills() {
-    if (!this.site.mobileView) {
-      return;
-    }
-
     next(() => {
       const pills = Array.from(
         document.querySelectorAll(".more-content-topics")
@@ -44,6 +36,9 @@ export default class MoreTopics extends Component {
 
       if (pills.length <= 1) {
         this.singleList = true;
+      }
+
+      if (this.singleList || !this.site.mobileView) {
         return;
       }
 

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

@@ -368,10 +368,6 @@ a.badge-category {
   max-width: 757px;
 }
 
-.more-content-wrapper .topic-list-body .topic-list-data:first-of-type {
-  padding-left: 0;
-}
-
 // Target the .badge-category text, the bullet icon needs to maintain `display: block`
 .more-content-topics h3 .badge-wrapper.bullet span.badge-category,
 .more-content-topics h3 .badge-wrapper.box span,

app/assets/stylesheets/desktop/topic-post.scss

@@ -362,6 +362,12 @@ pre.codeblock-buttons:hover {
   }
 }
 
+.more-content-wrapper.single-list {
+  .more-content-topics {
+    width: 100%;
+  }
+}
+
 .more-content-topics {
   margin-top: 2em;
 

app/assets/stylesheets/desktop/topic.scss

@@ -138,6 +138,7 @@
 
 .more-content-wrapper {
   display: flex;
+  justify-content: space-around;
 
   .topic-list-header,
   .posts-map,
@@ -148,6 +149,10 @@
   .topic-list-body {
     border-top: none;
 
+    .topic-list-item {
+      padding-left: 5px;
+    }
+
     .topic-list-item:last-of-type {
       border-bottom: none;
     }

app/assets/stylesheets/mobile/topic-post.scss

@@ -253,11 +253,15 @@ a.reply-to-tab {
 }
 
 .more-content-wrapper {
-  &:not(.mobile-single-list) {
+  &:not(.single-list) {
     .more-topics-title {
       display: none;
     }
   }
+
+  .topic-list-data {
+    padding-left: 5px;
+  }
 }
 
 .more-content-topics {