Add commentor name alongside fid for video comments

3 files changed, 19 insertions, 7 deletions

diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.html b/client/src/app/videos/+video-watch/comment/video-comment.component.html
index f53852385..e26100346 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.html
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.html
@@ -19,12 +19,12 @@
         <div *ngIf="highlightedComment === true" class="highlighted-comment" i18n>Highlighted comment</div>
 
         <div class="comment-account-date">
-          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer"
-             class="comment-account"
-             [ngClass]="{ 'video-author': video.account.id === comment.account.id }"
-          >{{ comment.by }}</a>
+          <a [href]="comment.account.url" target="_blank" rel="noopener noreferrer" class="comment-account">
+            <span class="comment-account-name" [ngClass]="{ 'video-author': video.account.id === comment.account.id }">{{ comment.account.displayName }}</span>
+            <span class="comment-account-fid ml-1">{{ comment.by }}</span>
+          </a>
           <a [routerLink]="['/videos/watch', video.uuid, { 'threadId': comment.threadId }]"
-             class="comment-date">{{ comment.createdAt | myFromNow }}</a>
+             class="comment-date" [title]="comment.createdAt">{{ comment.createdAt | myFromNow }}</a>
         </div>
         <div
           class="comment-html"
diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 0f95078c2..d8fd5c5de 100644
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -67,8 +67,12 @@
 
         word-break: break-all;
         color: var(--mainForegroundColor);
-        font-weight: $font-bold;
+        font-weight: 600;
         font-size: 90%;
+
+        .comment-account-fid {
+          opacity: .6;
+        }
       }
 
       .comment-date {
@@ -81,7 +85,6 @@
 
     .comment-html {
       @include peertube-word-wrap;
-      margin-bottom: 10px;
 
       // Mentions
       ::ng-deep a {
@@ -96,6 +99,11 @@
 
       }
 
+      // Paragraphs
+      ::ng-deep p {
+        margin-bottom: .3rem;
+      }
+
       &.comment-html-deleted {
         color: $grey-foreground-color;
       }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index fe6a891d5..1b5d355f8 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -412,6 +412,10 @@ $video-info-margin-left: 44px;
       @media screen and (max-width: 1800px - (3* $video-miniature-width)) {
         margin-left: 1rem;
       }
+      @media screen and (max-width: 500px) {
+        margin-left: 0;
+        margin-top: .5rem;
+      }
     }
   }
 }