Add link to the article in comments on the author page

src/components/Article/Comment.module.scss

@@ -169,6 +169,32 @@
   margin-right: 12px;
 }
 
+.articleLink {
+  flex: 0 0 50%;
+  @include font-size(1.2rem);
+  margin-right: 2em;
+
+  @include media-breakpoint-down(md) {
+    margin: 0.3em 0 0.5em;
+  }
+
+  @include media-breakpoint-up(md) {
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+
+.articleLinkIcon {
+  display: inline-block;
+  margin-right: 1em;
+  vertical-align: middle;
+  width: 1em;
+}
+
 .commentDates {
   flex: 1;
   display: flex;
@@ -176,7 +202,7 @@
   align-items: center;
   justify-content: flex-start;
   font-size: 1.2rem;
-  margin-bottom: 4px;
+  margin: 0 1em 4px 0;
   color: rgb(0 0 0 / 30%);
 
   @include font-size(1.2rem);
@@ -190,17 +216,17 @@
       margin-right: 0.5rem;
       vertical-align: middle;
     }
-
-    @include media-breakpoint-down(md) {
-      margin-left: 1rem;
-    }
   }
 }
 
 .commentDetails {
-  display: flex;
   padding: 1rem 0.2rem 0;
   margin-bottom: 1.2rem;
+
+  @include media-breakpoint-up(md) {
+    align-items: start;
+    display: flex;
+  }
 }
 
 .compactUserpic {

src/components/Article/Comment.tsx

@@ -14,6 +14,8 @@ import { useSnackbar } from '../../context/snackbar'
 import { ShowIfAuthenticated } from '../_shared/ShowIfAuthenticated'
 import { useLocalize } from '../../context/localize'
 import { CommentRatingControl } from './CommentRatingControl'
+import { getPagePath } from '@nanostores/router'
+import { router } from '../../stores/router'
 
 const CommentEditor = lazy(() => import('../_shared/CommentEditor'))
 
@@ -23,6 +25,8 @@ type Props = {
   isArticleAuthor?: boolean
   sortedComments?: Reaction[]
   lastSeen?: Date
+  class?: string
+  showArticleLink?: boolean
 }
 
 export const Comment = (props: Props) => {
@@ -98,7 +102,11 @@ export const Comment = (props: Props) => {
   const createdAt = new Date(comment()?.createdAt)
 
   return (
-    <li class={clsx(styles.comment, { [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen })}>
+    <li
+      class={clsx(styles.comment, props.class ? props.class : '', {
+        [styles.isNew]: !isCommentAuthor() && createdAt > props.lastSeen
+      })}
+    >
       <Show when={!!body()}>
         <div class={styles.commentContent}>
           <Show
@@ -133,6 +141,15 @@ export const Comment = (props: Props) => {
                 <div class={styles.articleAuthor}>{t('Author')}</div>
               </Show>
 
+              <Show when={props.showArticleLink}>
+                <div class={styles.articleLink}>
+                  <Icon name="arrow-right" class={styles.articleLinkIcon} />
+                  <a href={getPagePath(router, 'article', { slug: comment().shout.slug })}>
+                    {comment().shout.title}
+                  </a>
+                </div>
+              </Show>
+
               <div class={styles.commentDates}>
                 <div class={styles.date}>{formattedDate(comment()?.createdAt)()}</div>
                 <Show when={comment()?.updatedAt}>
@@ -142,6 +159,7 @@ export const Comment = (props: Props) => {
                   </div>
                 </Show>
               </div>
+
               <CommentRatingControl comment={comment()} />
             </div>
           </Show>

src/components/Views/Author/Author.module.scss

@@ -87,3 +87,7 @@
 .authorContainer {
   margin-top: 3.2rem;
 }
+
+.comment {
+  background: #efefef;
+}

src/components/Views/Author/Author.tsx

@@ -223,10 +223,16 @@ export const AuthorView = (props: AuthorProps) => {
         </Match>
         <Match when={searchParams().by === 'commented'}>
           <div class="wide-container">
+            <div class="row">
+              <div class="col-md-20 col-lg-18">
                 <ul class={stylesArticle.comments}>
-              <For each={commented()}>{(comment) => <Comment comment={comment} />}</For>
+                  <For each={commented()}>
+                    {(comment) => <Comment comment={comment} class={styles.comment} showArticleLink />}
+                  </For>
                 </ul>
               </div>
+            </div>
+          </div>
         </Match>
         <Match when={searchParams().by === 'followers'}>
           <div class="wide-container">