From 3bfcd323b3baa8d97b9f09557ed6615e970a78a7 Mon Sep 17 00:00:00 2001
From: Tomasz Nastaly <tomasz.nastaly@hyland.com>
Date: Wed, 3 Apr 2024 12:16:00 +0200
Subject: [PATCH] [ACS-7419] Fix broken styling of notifications

---
 .../notification-history.component.html       | 12 ++++---
 .../notification-history.component.scss       | 35 +++++++++++++++++++
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html
index 2132b7dfa6..c4408bc7d7 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.html
+++ b/lib/core/src/lib/notifications/components/notification-history.component.html
@@ -47,11 +47,13 @@
                             <mat-icon matListItemLine
                                       class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
                         </ng-template>
-                        <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
-                           *ngFor="let message of notification.messages"
-                           matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
-                        <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
-                           matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
+                        <div class="adf-notification-history-menu-item-content">
+                            <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
+                               *ngFor="let message of notification.messages"
+                               matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
+                            <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
+                               matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
+                        </div>
                     </mat-list-item>
                 </ng-container>
                 <ng-template #empty_list_template>
diff --git a/lib/core/src/lib/notifications/components/notification-history.component.scss b/lib/core/src/lib/notifications/components/notification-history.component.scss
index a0ba3d6c4d..dbcd383a99 100644
--- a/lib/core/src/lib/notifications/components/notification-history.component.scss
+++ b/lib/core/src/lib/notifications/components/notification-history.component.scss
@@ -1,6 +1,35 @@
 @import 'styles/mat-selectors';
 
+$notification-item-height: 72px;
+
 .adf {
+    &-notification-history-list {
+        /* stylelint-disable */
+        .mat-mdc-list-item-unscoped-content {
+            height: 100%;
+            display: flex !important;
+            align-items: center !important;
+        }
+
+        .mdc-list-item__secondary-text::before {
+            height: auto;
+        }
+        /* stylelint-enable */
+    }
+
+    &-notification-history-menu-item-content {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+        overflow: hidden;
+        padding: 0 0 0 16px;
+
+        p {
+            line-height: 16px;
+            margin-bottom: 0;
+        }
+    }
+
     &-notification-history-menu_button#{$mat-button} {
         margin-right: 8px;
         border-radius: 90%;
@@ -16,12 +45,14 @@
     }
 
     &-notification-history-list #{$mat-subheader} {
+        display: flex;
         justify-content: space-between;
     }
 
     &-notification-history-menu:has(.adf-notification-history-list) {
         .adf-notification-history-menu-item {
             cursor: pointer;
+            height: $notification-item-height;
         }
 
         .adf-notification-history-menu-item:focus {
@@ -66,6 +97,10 @@
         display: flex;
         justify-content: center;
         padding: 10px;
+
+        button {
+            width: 100%;
+        }
     }
 }