UX: improve featured link positioning in topic titles (#25427)

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");
   });
 

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);

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);

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

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

app/assets/stylesheets/desktop/category-list.scss

@@ -142,10 +142,6 @@
     }
   }
 
-  .topic-featured-link {
-    padding-left: 8px;
-  }
-
   .subcategories-with-subcategories {
     .category-description {
       display: none;