From dd8d89d9c85afee1e3ed23b0a713e3f964d6c4a9 Mon Sep 17 00:00:00 2001
From: Roman Rizzi <rizziromanalejandro@gmail.com>
Date: Tue, 1 Aug 2023 00:49:24 -0300
Subject: [PATCH] UX: Use full width when displaying a single recommendations
 list. (#22896)

---
 .../discourse/app/components/more-topics.hbs          |  3 +--
 .../discourse/app/components/more-topics.js           | 11 +++--------
 app/assets/stylesheets/common/base/topic.scss         |  4 ----
 app/assets/stylesheets/desktop/topic-post.scss        |  6 ++++++
 app/assets/stylesheets/desktop/topic.scss             |  5 +++++
 app/assets/stylesheets/mobile/topic-post.scss         |  6 +++++-
 6 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/more-topics.hbs b/app/assets/javascripts/discourse/app/components/more-topics.hbs
index 3c9f3ffcf23..c3acb2d76ff 100644
--- a/app/assets/javascripts/discourse/app/components/more-topics.hbs
+++ b/app/assets/javascripts/discourse/app/components/more-topics.hbs
@@ -1,6 +1,5 @@
 <div
-  class="more-content-wrapper
-    {{if this.showTitleOnMobile 'mobile-single-list'}}"
+  class="more-content-wrapper {{if this.singleList 'single-list'}}"
   {{did-insert this.buildListPills}}
 >
   {{#if this.showTopicListsNav}}
diff --git a/app/assets/javascripts/discourse/app/components/more-topics.js b/app/assets/javascripts/discourse/app/components/more-topics.js
index 58d3dd6c796..f82ac3ad44b 100644
--- a/app/assets/javascripts/discourse/app/components/more-topics.js
+++ b/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;
       }
 
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index a6d1225fe0f..6540b894ae0 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/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,
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 250be807fcc..b998de7272c 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 181f82c1f6c..5a33ab04bd4 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/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;
     }
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index f09fb33bd24..3fc6eee640a 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/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 {