From 9ea27302db8a14572cb11caeb28844541e83e4df Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 10 Apr 2023 16:51:23 +0300
Subject: [PATCH 1/2] UI: Fixed show emil notification preview in big content

---
 .../notification/sent/sent-notification-dialog.component.scss  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
index 0f2ca8a228..0bf2baebc2 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
@@ -130,6 +130,8 @@
       border-radius: 4px;
       background: #fff;
       padding: 12px 16px;
+      display: inline-grid;
+      width: 100%;
 
       .subject {
         padding-bottom: 12px;
@@ -142,6 +144,7 @@
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
+        overflow-x: auto;
       }
     }
   }

From 74a58817dbede8e40ee337c65fa8248521d3b93c Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 11 Apr 2023 12:20:51 +0300
Subject: [PATCH 2/2] UI: Change default notification style for alarm
 notification

---
 .../notification/show-notification-popover.component.html     | 4 ++--
 .../components/notification/notification.component.scss       | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
index 096cecd91a..0a0a5e3cdb 100644
--- a/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
+++ b/ui-ngx/src/app/modules/home/components/notification/show-notification-popover.component.html
@@ -25,13 +25,13 @@
 </section>
 <mat-divider></mat-divider>
 <div *ngIf="(notifications$ | async).length; else emptyNotification" style="overflow: auto">
-  <section style="min-height: 100px; overflow: auto; padding: 10px 0;">
+  <section style="min-height: 100px; overflow: auto; padding: 6px 0;">
    <div *ngFor="let notification of (notifications$ | async); let last = last; trackBy: trackById">
      <tb-notification [notification]="notification"
                       [onClose]="onClose"
                       (markAsRead)="markAsRead($event)">
      </tb-notification>
-     <mat-divider *ngIf="!last" style="margin-bottom: 4px"></mat-divider>
+     <mat-divider *ngIf="!last" style="margin: 4px"></mat-divider>
    </div>
   </section>
 </div>
diff --git a/ui-ngx/src/app/shared/components/notification/notification.component.scss b/ui-ngx/src/app/shared/components/notification/notification.component.scss
index f73b3cc137..c2d50ed106 100644
--- a/ui-ngx/src/app/shared/components/notification/notification.component.scss
+++ b/ui-ngx/src/app/shared/components/notification/notification.component.scss
@@ -20,6 +20,7 @@
     display: block;
     border: 1px solid;
     border-radius: 4px;
+    margin: 4px;
   }
 
   .icon {
@@ -61,6 +62,7 @@
     .alarm-severity {
       padding: 5px;
       border-radius: 8px;
+      margin-right: 7px;
 
       .severity {
         font-weight: 500;