From 572668cdd361b1d3fa3aacba5a4a1ecc80e795cd Mon Sep 17 00:00:00 2001
From: Bastian Rihm <brihm@intevation.de>
Date: Tue, 28 May 2024 17:03:22 +0200
Subject: [PATCH] Fix mat lists

---
 .../account-dialog.component.html             | 11 +++++-----
 .../projector-detail.component.html           | 20 +++++++++----------
 .../projector-detail.component.scss           |  6 ++++++
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/client/src/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html b/client/src/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html
index 7a64b3506c..cbee2b44f6 100644
--- a/client/src/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html
+++ b/client/src/app/site/modules/global-headbar/components/account-dialog/account-dialog.component.html
@@ -7,18 +7,17 @@ <h2 mat-dialog-title class="flex-container padding-top-16">
 <mat-divider></mat-divider>
 <mat-dialog-content class="account-dialog-container">
     <div class="account-dialog-menu-items">
-        <mat-selection-list [multiple]="false">
+        <mat-nav-list>
             <ng-container *ngFor="let item of filteredMenuItems">
-                <mat-list-option
-                    [value]="item"
-                    [selected]="activeMenuItem === item.name"
+                <mat-list-item
+                    [activated]="activeMenuItem === item.name"
                     (click)="activeMenuItem = item.name"
                 >
                     {{ item.name | translate }}
-                </mat-list-option>
+                </mat-list-item>
                 <mat-divider></mat-divider>
             </ng-container>
-        </mat-selection-list>
+        </mat-nav-list>
     </div>
     <mat-divider [vertical]="true"></mat-divider>
     <div class="account-dialog-content">
diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
index d46c24db09..554e40e117 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.html
@@ -294,15 +294,15 @@ <h2>{{ projector.name }}</h2>
                         <mat-expansion-panel-header>
                             <span>{{ 'Timers' | translate }}</span>
                         </mat-expansion-panel-header>
-                        <mat-list>
-                            <mat-list-item *ngFor="let countdown of countdowns" class="larger-mat-list-item">
+                        <div class="card-list">
+                            <div *ngFor="let countdown of countdowns" class="card-list-item">
                                 <os-countdown-controls
                                     class="dynamic-list-entry"
                                     [countdown]="countdown"
                                     [projector]="projector"
                                 ></os-countdown-controls>
-                            </mat-list-item>
-                        </mat-list>
+                            </div>
+                        </div>
                         <mat-action-row>
                             <button type="button" mat-button (click)="createProjectorCountdown()">
                                 <mat-icon>add</mat-icon>
@@ -316,8 +316,8 @@ <h2>{{ projector.name }}</h2>
                         <mat-expansion-panel-header>
                             <span>{{ 'Messages' | translate }}</span>
                         </mat-expansion-panel-header>
-                        <mat-list>
-                            <mat-list-item class="larger-mat-list-item">
+                        <div class="card-list">
+                            <div class="card-list-item">
                                 <mat-card class="wifi-card" style="width: 100%">
                                     <mat-card-content>
                                         <div
@@ -336,15 +336,15 @@ <h2>{{ projector.name }}</h2>
                                         </small>
                                     </mat-card-content>
                                 </mat-card>
-                            </mat-list-item>
-                            <mat-list-item *ngFor="let message of messages" class="larger-mat-list-item">
+                            </div>
+                            <div *ngFor="let message of messages" class="card-list-item">
                                 <os-message-controls
                                     class="dynamic-list-entry"
                                     [message]="message"
                                     [projector]="projector"
                                 ></os-message-controls>
-                            </mat-list-item>
-                        </mat-list>
+                            </div>
+                        </div>
                         <mat-action-row>
                             <button type="button" mat-button (click)="createProjectorMessage()">
                                 <mat-icon>add</mat-icon>
diff --git a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
index 0c53876f64..acc555cc7b 100644
--- a/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
+++ b/client/src/app/site/pages/meetings/pages/projectors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
@@ -131,6 +131,12 @@
     }
 }
 
+.card-list {
+    .card-list-item:not(:last-of-type) {
+        margin-bottom: 8px;
+    }
+}
+
 .drop-list-entry:last-child {
     border: none;
 }