From 964760a6a8a2797d0709efaa70172ccbb8e8523e Mon Sep 17 00:00:00 2001
From: Tzahi12345 <tzahi2@hotmail.com>
Date: Sat, 31 Dec 2022 15:35:45 -0500
Subject: [PATCH] Fixed potential UI bug where notifications menu would be too
 small

---
 src/app/app.component.css                                 | 8 +++++++-
 src/app/app.component.html                                | 2 +-
 .../notifications-list/notifications-list.component.html  | 6 ++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/app.component.css b/src/app/app.component.css
index af08830..95e1df9 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -34,4 +34,10 @@
 
 ::ng-deep .mdc-switch {
     outline: none !important;
-}
\ No newline at end of file
+}
+
+::ng-deep .notifications-menu {
+    width: 30vw !important;
+    max-width: 100% !important;
+    min-width: 280px !important;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 94ddab1..910c352 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/components/notifications-list/notifications-list.component.html b/src/app/components/notifications-list/notifications-list.component.html
index 8253525..78930e1 100644
--- a/src/app/components/notifications-list/notifications-list.component.html
+++ b/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">