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.

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

@@ -1,7 +1,4 @@
-<div
+<div class="more-content-wrapper" {{did-insert this.buildListPills}}>
-  class="more-content-wrapper {{if this.singleList 'single-list'}}"
-  {{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}}
+  <div class="more-topics-lists {{if this.singleList 'single-list'}}">
-    <RelatedMessages @topic={{@topic}} />
+    {{#if @topic.relatedMessages.length}}
-  {{/if}}
+      <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}} />
+    <h3 class="suggested-topics-message">
-
+      {{html-safe this.browseMoreMessage}}
-    <span>
+    </h3>
-      <PluginOutlet
-        @name="below-suggested-topics"
-        @connectorTagName="div"
-        @outletArgs={{hash topic=@topic}}
-      />
-    </span>
   {{/if}}
-
+</div>
-  <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}}

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) {
+  updatePreference(value, rememberPref = true) {
-    if (!rememberPref) {
+    if (rememberPref) {
       this.keyValueStore.set({ key: TOPIC_LIST_PREFERENCE_KEY, value });
     }
 

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;

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%;
   }

app/assets/stylesheets/desktop/topic.scss

@@ -136,7 +136,7 @@
   }
 }
 
-.more-content-wrapper {
+.more-topics-lists {
   display: flex;
   justify-content: space-around;
   clear: both;

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;