Merge pull request #8343 from vvlladd28/bug/notificaion/email-preview

Fixed show email notification preview in big content

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>

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;
       }
     }
   }

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;