From 76e5a939d4d24c95ddaa6c4f1db1f2bc09330187 Mon Sep 17 00:00:00 2001
From: Ty Correll <tytekkit@gmail.com>
Date: Wed, 27 Sep 2023 18:23:30 -0500
Subject: [PATCH] UX: selected indicator more topics spacing (#23696)

* UX: selected indicator more topics spacing

In relation to the selected indicator, this PR addresses a vertical and horizontal issue with the indicator touching the table header and its left alignment to be more consistent with the regular topic list feed.

* UX: border for pill navigation on mobile

Makes UI more consistent desktop -> mobile, by adding a border to the bottom of the Suggested/Related.
---
 .../stylesheets/common/components/more-topics.scss     | 10 ++++++----
 .../stylesheets/mobile/components/more-topics.scss     |  1 +
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/common/components/more-topics.scss b/app/assets/stylesheets/common/components/more-topics.scss
index ebe66e02ee0..d55bd3261dd 100644
--- a/app/assets/stylesheets/common/components/more-topics.scss
+++ b/app/assets/stylesheets/common/components/more-topics.scss
@@ -35,11 +35,13 @@
     }
   }
 
-  .topic-list .topic-list-data:first-of-type {
-    padding-left: 5px;
-  }
-
   .more-topics__list {
+    .topic-list-header:after {
+      content: "";
+      display: block;
+      height: 10px;
+    }
+
     .topic-list-body {
       border-top: none;
 
diff --git a/app/assets/stylesheets/mobile/components/more-topics.scss b/app/assets/stylesheets/mobile/components/more-topics.scss
index b6aec33e8e8..04cdb7d5e4b 100644
--- a/app/assets/stylesheets/mobile/components/more-topics.scss
+++ b/app/assets/stylesheets/mobile/components/more-topics.scss
@@ -1,6 +1,7 @@
 .more-topics__container {
   .nav {
     margin-block: 0.5em 1em;
+    border-bottom: 1px solid var(--primary-low);
   }
 
   .more-content-topics {