From 0da3349513f5d0fe43e59aead6f0665f9bbfeeea Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 5 Feb 2025 08:28:22 -0500
Subject: [PATCH] UX: fix wrapping of topic map links with counter (#31184)

Due to a change with how the link counter renders (as a pseudo element)
the grid layout in the topic map link modal regressed slightly with long
links


before:

![image](https://github.com/user-attachments/assets/f7ea022c-62f9-44da-a575-4e7f46d31985)


after:
<img
src="https://github.com/user-attachments/assets/1c955593-beae-4795-9d90-9a50fd7646dd"
width="500">
---
 .../app/components/topic-map/topic-map-link.gjs      | 12 +++++++-----
 .../stylesheets/common/components/topic-map.scss     | 11 +++++++++--
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-map/topic-map-link.gjs b/app/assets/javascripts/discourse/app/components/topic-map/topic-map-link.gjs
index bccb7ed2d62..2103b2ed673 100644
--- a/app/assets/javascripts/discourse/app/components/topic-map/topic-map-link.gjs
+++ b/app/assets/javascripts/discourse/app/components/topic-map/topic-map-link.gjs
@@ -31,11 +31,13 @@ export default class TopicMapLink extends Component {
       data-clicks={{@clickCount}}
       aria-label={{i18n "topic_map.clicks" count=@clickCount}}
     >
-      {{#if @title}}
-        {{replaceEmoji this.truncatedContent}}
-      {{else}}
-        {{this.truncatedContent}}
-      {{/if}}
+      <span class="content">
+        {{#if @title}}
+          {{replaceEmoji this.truncatedContent}}
+        {{else}}
+          {{this.truncatedContent}}
+        {{/if}}
+      </span>
     </a>
     {{#if (and @title @rootDomain)}}
       <span class="domain">
diff --git a/app/assets/stylesheets/common/components/topic-map.scss b/app/assets/stylesheets/common/components/topic-map.scss
index e758f463d03..6513b6d0a39 100644
--- a/app/assets/stylesheets/common/components/topic-map.scss
+++ b/app/assets/stylesheets/common/components/topic-map.scss
@@ -380,7 +380,7 @@ body:not(.archetype-private_message) {
       grid-template-columns: auto 1fr;
       grid-template-areas:
         "counter link"
-        ". domain";
+        "counter domain";
       padding: 0.75em 1rem;
       gap: 0.25em;
 
@@ -396,11 +396,18 @@ body:not(.archetype-private_message) {
     }
 
     .topic-link {
-      grid-area: link;
+      display: contents;
+
+      .content {
+        grid-area: link;
+      }
     }
 
     .topic-link[data-clicks]::before {
       @include click-counter-badge;
+      grid-area: counter;
+      align-self: start;
+      margin-top: 0.35em;
     }
 
     .topic-link[data-clicks]::after {