From: Afreen Misbah <afreen@ibm.com>
Date: Tue, 14 Jul 2026 18:44:47 +0000 (+0530)
Subject: mgr/dashboard: Truncate notification toasts
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=0834020077169bf004482f6f419199a427974584;p=ceph.git

mgr/dashboard: Truncate notification toasts

- truncated to 3 lines
- maximum 3 visible toasts
- duplicated toasts show "first maessage (+n more)"

Signed-off-by: Afreen Misbah <afreen@ibm.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
index 28569607d15e..2d2031d7a726 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-area/notification-area.component.scss
@@ -5,6 +5,13 @@ cd-notification-area {
   min-block-size: 0;
 }
 
+:host {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-block-size: 0;
+}
+
 .notification-section-heading {
   margin: 0;
   color: var(--cds-text-primary);
@@ -40,7 +47,25 @@ cd-notification-area {
   color: var(--cds-text-primary);
   line-height: 1.25;
   display: block;
+<<<<<<< HEAD
   overflow-wrap: break-word;
+=======
+  word-break: break-word;
+}
+
+.notification-message {
+  @include type.type-style('body-short-01');
+
+  color: $text-helper;
+  margin: 0;
+  line-height: 1.4;
+  margin-top: -$spacing-01;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-word;
+>>>>>>> 8e9c61bcc14 (mgr/dashboard: Fix the footer - view all button css in notification panel)
 }
 
 .notification-empty {
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
index 80c66379ef95..2afcf3d733eb 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notification-toast/notification-toast.component.scss
@@ -26,6 +26,14 @@
         color: $text-primary;
       }
 
+      .cds--toast-notification__subtitle {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        word-break: break-word;
+      }
+
       .cds--toast-notification__close-button {
         color: $icon-primary;
       }
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
index 789ec1bf1135..0eb6a5313d55 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/notification.service.spec.ts
@@ -164,7 +164,7 @@ describe('NotificationService', () => {
       expectSavedNotificationToHave({
         type: NotificationType.error,
         title: '502 - Bad Gateway',
-        message: '<ul><li>Error occurred in path a</li><li>Error occurred in path b</li></ul>'
+        message: 'Error occurred in path a (+1 more)'
       });
       flush();
     }));