fix notification unseen display rendering underneath the highlight

1 files changed, 15 insertions, 2 deletions

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index fcc0c3d4..26455ffb 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -26,9 +26,22 @@
     color: var(--text, $fallback--text);
   }
 
-  .unseen {
+  .notification {
+    position: relative;
+
+    .notification-overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+    }
 
-    background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+    &.unseen {
+      .notification-overlay {
+        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+      }
+    }
   }
 }