From 2485f5d5f613bc9080ce5eb27a8098c4d14b104a Mon Sep 17 00:00:00 2001
From: Roman Rizzi <rizziromanalejandro@gmail.com>
Date: Mon, 7 Aug 2023 17:19:21 -0300
Subject: [PATCH] FIX: Don't cut browse more message on the mobile app.
 (#22998)

Adds a padding-bottom to the wrapper to avoid cutting the message on the mobile app and sets a max-width to align with the timeline on the desktop.

Fixes a bug on mobile where we updated the preference, but the user had a single list.
---
 .../discourse/app/components/more-topics.hbs  | 53 ++++++++++---------
 .../more-topics-preference-tracking.js        |  4 +-
 app/assets/stylesheets/common/base/topic.scss |  4 ++
 .../stylesheets/desktop/topic-post.scss       |  6 ++-
 app/assets/stylesheets/desktop/topic.scss     |  2 +-
 app/assets/stylesheets/mobile/topic-post.scss |  2 +-
 6 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/more-topics.hbs b/app/assets/javascripts/discourse/app/components/more-topics.hbs
index a7b4e22181d..e46b60f29b9 100644
--- a/app/assets/javascripts/discourse/app/components/more-topics.hbs
+++ b/app/assets/javascripts/discourse/app/components/more-topics.hbs
@@ -1,7 +1,4 @@
-<div
-  class="more-content-wrapper {{if this.singleList 'single-list'}}"
-  {{did-insert this.buildListPills}}
->
+<div class="more-content-wrapper" {{did-insert this.buildListPills}}>
   {{#if this.showTopicListsNav}}
     <div class="row">
       <ul class="nav nav-pills" {{did-insert this.buildListPills}}>
@@ -19,27 +16,33 @@
     </div>
   {{/if}}
 
-  {{#if @topic.relatedMessages.length}}
-    <RelatedMessages @topic={{@topic}} />
-  {{/if}}
+  <div class="more-topics-lists {{if this.singleList 'single-list'}}">
+    {{#if @topic.relatedMessages.length}}
+      <RelatedMessages @topic={{@topic}} />
+    {{/if}}
+
+    {{#if @topic.suggestedTopics.length}}
+      <SuggestedTopics @topic={{@topic}} />
+
+      <span>
+        <PluginOutlet
+          @name="below-suggested-topics"
+          @connectorTagName="div"
+          @outletArgs={{hash topic=@topic}}
+        />
+      </span>
+    {{/if}}
+
+    <PluginOutlet
+      @name="topic-more-content"
+      @outletArgs={{hash model=@topic}}
+    />
+
+  </div>
 
   {{#if @topic.suggestedTopics.length}}
-    <SuggestedTopics @topic={{@topic}} />
-
-    <span>
-      <PluginOutlet
-        @name="below-suggested-topics"
-        @connectorTagName="div"
-        @outletArgs={{hash topic=@topic}}
-      />
-    </span>
+    <h3 class="suggested-topics-message">
+      {{html-safe this.browseMoreMessage}}
+    </h3>
   {{/if}}
-
-  <PluginOutlet @name="topic-more-content" @outletArgs={{hash model=@topic}} />
-</div>
-
-{{#if @topic.suggestedTopics.length}}
-  <h3 class="suggested-topics-message">
-    {{html-safe this.browseMoreMessage}}
-  </h3>
-{{/if}}
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/services/more-topics-preference-tracking.js b/app/assets/javascripts/discourse/app/services/more-topics-preference-tracking.js
index 0241ef64552..091285f2cdf 100644
--- a/app/assets/javascripts/discourse/app/services/more-topics-preference-tracking.js
+++ b/app/assets/javascripts/discourse/app/services/more-topics-preference-tracking.js
@@ -13,8 +13,8 @@ export default class MoreTopicsPreferenceTracking extends Service {
     this.preference = this.keyValueStore.get(TOPIC_LIST_PREFERENCE_KEY);
   }
 
-  updatePreference(value, rememberPref = false) {
-    if (!rememberPref) {
+  updatePreference(value, rememberPref = true) {
+    if (rememberPref) {
       this.keyValueStore.set({ key: TOPIC_LIST_PREFERENCE_KEY, value });
     }
 
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index ad8f88e6945..25dce587796 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -397,6 +397,10 @@ a.badge-category {
   max-width: 150px;
 }
 
+.more-content-wrapper {
+  padding-bottom: max(env(safe-area-inset-bottom), 1em);
+}
+
 .more-content-topics {
   .topic-list-body {
     border-top: none;
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index afbb9ba29f8..732b1fde3d7 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -362,7 +362,11 @@ pre.codeblock-buttons:hover {
   }
 }
 
-.more-content-wrapper.single-list {
+.more-content-wrapper {
+  max-width: calc(var(--d-max-width) * 0.87);
+}
+
+.more-topics-lists.single-list {
   .more-content-topics {
     width: 100%;
   }
diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss
index 83f9e0b6f98..010d312ca01 100644
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@@ -136,7 +136,7 @@
   }
 }
 
-.more-content-wrapper {
+.more-topics-lists {
   display: flex;
   justify-content: space-around;
   clear: both;
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index d1633b2c6e1..7325e633e9d 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -252,7 +252,7 @@ a.reply-to-tab {
   }
 }
 
-.more-content-wrapper {
+.more-topics-lists {
   &:not(.single-list) {
     .more-topics-title {
       display: none;