From: Shashiranjan singh <singhshashiranjan34@gmail.com>
Date: Wed, 11 Mar 2026 18:35:07 +0000 (+0000)
Subject: dashboard: align 'no notifications available' icon in notifications page
X-Git-Tag: v21.0.1~577^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F67744%2Fhead;p=ceph.git

dashboard: align 'no notifications available' icon in notifications page

The icon displayed when there are no notifications available in the
notifications page was slightly misaligned with the message text.

This change adjusts the layout to properly align the icon with the
message using flexbox and removes unnecessary spacing.

Fixes: https://tracker.ceph.com/issues/74598
Signed-off-by: Shashiranjan Singh <singhshashiranjan34@gmail.com>
Signed-off-by: Shashiranjan singh <singhshashiranjan34@gmail.com>
---

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
index 2cd8e711277..c3f066ba42b 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notifications-page/notifications-page.component.scss
@@ -51,12 +51,14 @@
 
 // Empty state
 .empty-state {
-  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   color: var(--cds-text-secondary);
   margin-top: var(--cds-spacing-05);
 
   p {
-    margin: var(--cds-spacing-03) 0 0 0;
+    margin: 0;
     font-size: var(--cds-body-01-font-size);
     line-height: var(--cds-body-01-line-height);
   }
@@ -133,6 +135,9 @@
 .empty-icon,
 .no-selection-icon {
   fill: var(--cds-icon-secondary);
+}
+
+.no-selection-icon {
   margin-bottom: var(--cds-spacing-05);
 }