Fix button position in search bar

src/app/components/shared/comment-list/comment-list.component.html

@@ -8,21 +8,25 @@
           (click)="hideCommentsList=false; searchBox.value=''">
     <mat-icon>close</mat-icon>
   </button>
+
   <span class="fill-remaining-space"></span>
-  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
-    [matTooltip]="'Export comments'" (click)="openExportDialog()">
-    <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
-  </button>
 
-  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value"
-          color="accent" (click)="openCreateDialog()">
-    <mat-icon class="searchBarIcon">add_circle</mat-icon>
-  </button>
+  <div class="button-bar" fxLayoutAlign="center center">
+    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && userRole === 1 && comments.length > 0"
+            [matTooltip]="'Export comments'" (click)="openExportDialog()">
+      <mat-icon class="searchBarIcon" color="accent">cloud_download</mat-icon>
+    </button>
 
-  <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
-          color="accent" [matMenuTriggerFor]="filterMenu">
-    <mat-icon class="searchBarIcon">sort</mat-icon>
-  </button>
+    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value"
+            color="accent" (click)="openCreateDialog()">
+      <mat-icon class="searchBarIcon">add_circle</mat-icon>
+    </button>
+
+    <button mat-icon-button class="searchBarButton" *ngIf="!searchBox.value && comments.length > 0"
+            color="accent" [matMenuTriggerFor]="filterMenu">
+      <mat-icon class="searchBarIcon">sort</mat-icon>
+    </button>
+  </div>
 
   <mat-menu #filterMenu="matMenu" xPosition="before">
     <div id="filterIcon">
@@ -56,9 +60,10 @@
   </mat-menu>
 </div>
 
-<mat-card class="outer-card" *ngIf="comments.length > 0">
+<mat-card class="outer-card" *ngIf="showComments().length > 0">
   <app-comment *ngFor="let current of showComments()" [comment]="current"></app-comment>
 </mat-card>
-<div fxLayout="row" fxLayoutAlign="center center" class="no-comments">
-  <h4 *ngIf="comments.length < 1">{{ 'comment-page.no-comments' | translate }}</h4>
+
+<div *ngIf="comments.length < 1" fxLayout="row" fxLayoutAlign="center center" class="no-comments">
+  <h4>{{ 'comment-page.no-comments' | translate }}</h4>
 </div>

src/app/components/shared/comment-list/comment-list.component.scss

@@ -40,7 +40,7 @@ input {
   height: 45px !important;
   text-align: center;
   min-width: 50px;
-  margin: 10px 2% 0 0;
+  margin: 0 2% 0 0;
 }
 
 .close {
@@ -61,3 +61,7 @@ input {
 h4  {
   color: var(--text-1);
 }
+
+.button-bar {
+  margin-right: 2%;
+}