Fixed potential UI bug where notifications menu would be too small

src/app/app.component.css

@@ -34,4 +34,10 @@
 
 ::ng-deep .mdc-switch {
     outline: none !important;
-}
+}
+
+::ng-deep .notifications-menu {
+    width: 30vw !important;
+    max-width: 100% !important;
+    min-width: 280px !important;
+}

src/app/app.component.html

@@ -12,7 +12,7 @@
                     </div>
                     <div class="col-6" style="text-align: right; align-items: flex-end; display: inline-block">
                         <button [matMenuTriggerFor]="notificationsMenu" (menuOpened)="notificationMenuOpened()" mat-icon-button><mat-icon [matBadge]="notification_count" matBadgeColor="warn" matBadgeSize="small" *ngIf="notification_count > 0">notifications</mat-icon><mat-icon *ngIf="notification_count === 0">notifications_none</mat-icon></button>
-                        <mat-menu (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
+                        <mat-menu [classList]="'notifications-menu'" (close)="notificationMenuClosed()" #notificationsMenu="matMenu">
                             <app-notifications #notifications (notificationCount)="notificationCountUpdate($event)" (click)="$event.stopPropagation()"></app-notifications>
                         </mat-menu>
                         <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>

src/app/components/notifications-list/notifications-list.component.html

@@ -8,13 +8,15 @@
             </mat-card-subtitle>
             <mat-card-title>
                 <ng-container *ngIf="NOTIFICATION_PREFIX[notification.type]">
-                    {{NOTIFICATION_PREFIX[notification.type]}}&nbsp;
+                    {{NOTIFICATION_PREFIX[notification.type]}}
                 </ng-container>
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
             <ng-container *ngIf="NOTIFICATION_SUFFIX_KEY[notification.type]">
-                {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
+                <div style="word-break: break-word">
+                    {{notification['data'][NOTIFICATION_SUFFIX_KEY[notification.type]]}}
+                </div>
             </ng-container>
         </mat-card-content>
         <mat-card-actions *ngIf="notification.actions?.length > 0">