Display search bar only if comments exist

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

-<div fxLayout="row" id="search-container">
+<div fxLayout="row" id="search-container" *ngIf="comments.length > 0">
   <mat-label fxLayoutAlign="center center">
     <mat-icon class="search-icon">search</mat-icon>
   </mat-label>
@@ -72,6 +72,13 @@
   </mat-menu>
 </div>
 
+<div fxLayout="row" fxLayoutAlign="center" *ngIf="comments.length < 1">
+  <button mat-fab class="fab-extended" (click)="openCreateDialog()">
+    {{'comment-list.add-comment' | translate}}
+    <mat-icon class="add">add</mat-icon>
+  </button>
+</div>
+
 <div *ngIf="!isLoading">
 <app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current" [parseVote]="getVote(current)"></app-comment>
 </div>

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

@@ -65,7 +65,7 @@ input {
 }
 
 .no-comments {
-  margin-top: 30%;
+  margin-top: 10%;
 }
 
 h4  {
@@ -115,3 +115,21 @@ h4  {
   color: var(--on-surface);
   opacity: 1;
 }
+
+.fab-extended {
+  width: 50%;
+  min-width: 270px;
+  height: 40px;
+  border-radius: 32px;
+  margin: 10% 0 10% 0;
+  font-size: large;
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+.add {
+  transform: scale(1.4);
+  padding-right: 5px;
+  padding-left: 5px;
+  color: var(--on-primary);
+}

[Klaus-Dieter Quibeldey-Cirkel]

comments.length > 2 seems more reasonable to me. A search is a good option for 3 or more comments.

[Lukas Mauß]

Okay. Filter and sort just like that (whole search bar)?

[Klaus-Dieter Quibeldey-Cirkel]

If no search is offered, the filter and sort icons should remain in place, otherwise the insertion of the search icon and the search field will result in disturbing movement.

[Lukas Mauß]

But who wants to sort/filter one or two comments?

[Klaus-Dieter Quibeldey-Cirkel]

Oha, now I understand your question. Of course, show everything when there are 3 or more comments.