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 @@
{{#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 {