Fix component layout

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

-<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
-  <div>
-    <mat-card *ngFor="let comment of comments">
-      <mat-card-header>
-        <mat-card-title>{{comment.subject}}</mat-card-title>
-        <mat-card-subtitle>
-          <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
-        </mat-card-subtitle>
-      </mat-card-header>
-      <mat-divider></mat-divider>
-      <mat-card-content>
-        <p>{{comment.body}}</p>
-      </mat-card-content>
-      <mat-divider></mat-divider>
-      <mat-card-actions *ngIf="userRole === userRoleTemp">
-        <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
-                (click)="setRead(comment)">
-          <mat-icon>speaker_notes</mat-icon>
-        </button>
-        <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
-                (click)="setRead(comment)">
-          <mat-icon>speaker_notes_off</mat-icon>
-        </button>
-        <button mat-icon-button color="warn" matTooltip="Delete comment"
-                (click)="delete(comment)">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </mat-card-actions>
-      <mat-card-actions *ngIf="userRole !== userRoleTemp">
-        <mat-icon *ngIf="comment.read" color="primary" matTooltip="Comment was read">speaker_notes</mat-icon>
-        <mat-icon *ngIf="!comment.read" color="warn" matTooltip="Comment was not read">speaker_notes_off</mat-icon>
-      </mat-card-actions>
-    </mat-card>
-  </div>
-</div>
+<mat-card *ngFor="let comment of comments">
+  <mat-card-header>
+    <mat-card-title>{{comment.subject}}</mat-card-title>
+    <mat-card-subtitle>
+      <span class="mat-caption">Submitted on {{ comment.creationTimestamp | date:'dd-MM-yyyy HH:mm:ss' }}</span>
+    </mat-card-subtitle>
+  </mat-card-header>
+  <mat-divider></mat-divider>
+  <mat-card-content>
+    <p>{{comment.body}}</p>
+  </mat-card-content>
+  <mat-divider></mat-divider>
+  <mat-card-actions *ngIf="userRole === userRoleTemp">
+    <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+            (click)="setRead(comment)">
+      <mat-icon>speaker_notes</mat-icon>
+    </button>
+    <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+            (click)="setRead(comment)">
+      <mat-icon>speaker_notes_off</mat-icon>
+    </button>
+    <button mat-icon-button color="warn" matTooltip="Delete comment"
+            (click)="delete(comment)">
+      <mat-icon>delete</mat-icon>
+    </button>
+  </mat-card-actions>
+  <mat-card-actions *ngIf="userRole !== userRoleTemp">
+    <button mat-icon-button *ngIf="comment.read" color="primary" matTooltip="Mark as read"
+            (click)="setRead(comment)" disabled>
+      <mat-icon>speaker_notes</mat-icon>
+    </button>
+    <button mat-icon-button *ngIf="!comment.read" color="warn" matTooltip="Mark as unread"
+            (click)="setRead(comment)" disabled>
+      <mat-icon>speaker_notes_off</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

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

 mat-card {
-  width: 800px;
-  max-width: 100%;
-  margin: 10px;
+  margin-bottom: 20px;
 }
 
 mat-card-content>:first-child {
-  margin-top: 16px;
+  margin-top: 20px;
 }

src/app/comment-list/comment-list.component.ts

@@ -21,13 +21,12 @@ export class CommentListComponent implements OnInit {
   comments: Comment[];
   isLoading = true;
 
-  constructor(
-    protected authenticationService: AuthenticationService,
-    private route: ActivatedRoute,
-    private roomService: RoomService,
-    private location: Location,
-    private commentService: CommentService,
-    private notification: NotificationService) {
+  constructor(protected authenticationService: AuthenticationService,
+              private route: ActivatedRoute,
+              private roomService: RoomService,
+              private location: Location,
+              private commentService: CommentService,
+              private notification: NotificationService) {
   }
 
   ngOnInit() {