Instead of only displaying a comment, we need to make sure users know that this has been a line comment.

Linking to changes for the display of the comment is a bit trickier, will do so in a follow up

Stop propagation of Link click

By not stopping the propagation of the click event on Link components weird things happen around the app like i.e. the Popover component things someone clicked outside and updates the url hash.

We should make sure to only propagate clicks where needed.

👉 Preview 👉 Workflow runs 👉 Branch on GitHub

Rebase

Nice! There’s something off with e2e tests and possibly visual specs. Could we apply these changes? I find it works better in-line on the web.

diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index afa74a12..dcc09418 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -62,14 +62,10 @@
     gap: 0.5rem;
     font-size: var(--font-size-small);
   }
-  :global(.code-location-header) {
-    width: fit-content;
-    font-size: var(--font-size-small);
-    padding: 0.25rem 0.75rem;
-    padding-left: 2.25rem;
-  }
-  :global(.code-location) {
+  .code-location {
+    font-family: var(--font-family-monospace);
     background-color: var(--color-fill-ghost);
+    font-size: var(--font-size-tiny);
     border-radius: var(--border-radius-tiny);
     padding: 0.125rem 0.25rem;
   }
@@ -134,8 +130,13 @@
     {#if isLastReply}
       <div class="connector-line"></div>
     {/if}
-    {#if location}
-      <div class="code-location-header txt-monospace">
+    <div class="card-header" class:card-header-no-icon={isReply}>
+      <slot class="icon" name="icon" />
+      <NodeId {baseUrl} nodeId={authorId} alias={authorAlias} />
+      <slot name="caption">{caption}</slot>
+      <Id {id} />
+      {#if location}
+        on change
         <div class="code-location">
           {#if location.path && selectionRange}
             <div class="comment-header">
@@ -152,13 +153,7 @@
             </div>
           {/if}
         </div>
-      </div>
-    {/if}
-    <div class="card-header" class:card-header-no-icon={isReply}>
-      <slot class="icon" name="icon" />
-      <NodeId {baseUrl} nodeId={authorId} alias={authorAlias} />
-      <slot name="caption">{caption}</slot>
-      <Id {id} />
+      {/if}
       <span class="timestamp" title={utils.absoluteTimestamp(timestamp)}>
         {utils.formatTimestamp(timestamp)}
       </span>

Address feedback by rudolfs

Removed stop propagation in Link