Add commentor name alongside fid for video comments

client/src/app/app.component.scss

@@ -25,7 +25,6 @@
     height: $header-height;
     display: flex;
     align-items: center;
-    flex: 1;
     min-width: 0;
 
     .icon {
@@ -81,6 +80,7 @@
     align-items: center;
     justify-content: flex-end;
     white-space: nowrap;
+    flex: 1;
   }
 }
 

client/src/app/shared/video/video-miniature.component.scss

@@ -3,7 +3,7 @@
 @import '_miniature';
 
 $more-button-width: 41px;
-$more-margin-right: 10px;
+$more-margin-right: 15px;
 
 .video-miniature {
   width: $video-miniature-width;

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"

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

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