From 3c54d9e64c6227c653a06a6139529016f712fd6e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 25 Jan 2024 16:49:34 -0500
Subject: [PATCH] UX: improve featured link positioning in topic titles
 (#25427)

---
 .../discourse/tests/acceptance/topic-test.js         |  2 +-
 app/assets/stylesheets/common/base/_topic-list.scss  |  5 +----
 app/assets/stylesheets/common/base/header.scss       |  1 +
 app/assets/stylesheets/common/base/tagging.scss      |  5 +----
 app/assets/stylesheets/common/base/topic.scss        | 12 ++++--------
 app/assets/stylesheets/desktop/category-list.scss    |  4 ----
 6 files changed, 8 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-test.js
index 7d8c92e1684..8e36e644702 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-test.js
@@ -285,7 +285,7 @@ acceptance("Topic featured links", function (needs) {
     await visit("/t/-/299/1");
 
     const link = query(".title-wrapper .topic-featured-link");
-    assert.strictEqual(link.innerText, " example.com");
+    assert.strictEqual(link.innerText, "example.com");
     assert.strictEqual(link.getAttribute("rel"), "ugc");
   });
 
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 56ca19e3ca6..04a0ab111f9 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -148,6 +148,7 @@
     padding: 15px 0;
     word-break: break-word;
     color: var(--primary);
+    margin-right: 0.5em;
   }
 
   .anon & {
@@ -293,10 +294,6 @@
     }
   }
 
-  .topic-featured-link {
-    padding-left: 5px;
-  }
-
   .topic-excerpt {
     display: block;
     font-size: var(--font-down-1);
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 7fa0b710c5e..069092fa5e6 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -338,6 +338,7 @@
     display: inline-flex;
     align-items: center;
     max-width: 100%;
+    gap: 0.5em;
     .discourse-tags {
       display: inline;
       color: var(--header_primary-high);
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index 560e0f47324..6aa90d6eeda 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -43,6 +43,7 @@
   .topic-header-extra {
     display: inline-flex;
     align-items: center;
+    gap: 0.5em;
   }
 
   .badge-wrapper {
@@ -128,9 +129,6 @@
   .discourse-tags {
     font-size: var(--font-down-1);
   }
-  .discourse-tags + .topic-featured-link {
-    margin-left: 0.5em;
-  }
 }
 
 .discourse-tags {
@@ -155,7 +153,6 @@ header .discourse-tag {
 
 .list-tags {
   display: inline-block;
-  margin-right: 3px;
   font-size: var(--font-down-1);
 }
 
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index 3713afcf795..2fc1870067f 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -267,9 +267,6 @@ $topic-progress-height: 42px;
   button {
     margin: 0 0.5em 0 0;
   }
-  a.topic-featured-link {
-    display: inline-block;
-  }
   .topic-statuses {
     line-height: 1.2;
     .d-icon {
@@ -287,9 +284,6 @@ $topic-progress-height: 42px;
     display: flex;
     flex-wrap: wrap;
     width: 90%;
-    a.topic-featured-link {
-      display: inline-block;
-    }
   }
   h1 {
     margin-bottom: 0;
@@ -435,12 +429,14 @@ $topic-progress-height: 42px;
 }
 
 a.topic-featured-link {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   text-transform: lowercase;
   color: var(--primary-med-or-secondary-med);
   font-size: 0.875rem;
   .d-icon {
-    margin-right: 3px;
+    font-size: var(--font-down-1);
+    margin-right: 0.25em;
   }
 }
 
diff --git a/app/assets/stylesheets/desktop/category-list.scss b/app/assets/stylesheets/desktop/category-list.scss
index 26f87e2318f..1356988dbdb 100644
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@@ -142,10 +142,6 @@
     }
   }
 
-  .topic-featured-link {
-    padding-left: 8px;
-  }
-
   .subcategories-with-subcategories {
     .category-description {
       display: none;