From: Shashiranjan singh <singhshashiranjan34@gmail.com>
Date: Fri, 13 Mar 2026 20:45:16 +0000 (+0000)
Subject: dashboard: align notifications footer to bottom when body has fewer items
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=dc5fd8710ca2d35b69456806be6dea05566b28f3;p=ceph.git

dashboard: align notifications footer to bottom when body has fewer items

- Fix footer alignment using sticky positioning
- Ensure footer stays at bottom for short notification lists
- Resolve ExpressionChangedAfterItHasBeenCheckedError
- Remove manual change detection causing test instability

Signed-off-by: Shashiranjan singh <singhshashiranjan34@gmail.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 372744424489..0e1c00d2f9a4 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
@@ -85,6 +85,10 @@
   align-items: flex-start;
   position: relative;
 
+  > cd-icon {
+    margin-top: -$spacing-03;
+  }
+
   .notification-close {
     position: absolute;
     right: 0;
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
index 29250ed22d5d..25813e0b9338 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-footer/notification-footer.component.scss
@@ -3,13 +3,14 @@
 
 .notification-footer {
   position: sticky;
+  bottom: 0;
+  width: 100%;
   z-index: 2;
   display: flex;
   align-items: center;
   background-color: theme.$layer-01;
   block-size: 2.5rem;
   border-block-start: 1px solid theme.$border-subtle-01;
-  inset-block-end: 0;
   min-block-size: 2.5rem;
   cursor: pointer;
 
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
index 745c39c53033..06de60ff49c4 100644
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-panel/notification-panel.component.scss
@@ -11,7 +11,6 @@ $inline-min-size: 20rem;
   position: fixed;
   z-index: 2;
   overflow-y: auto;
-  overflow-x: hidden;
   background-color: var(--cds-layer-01);
   border-block-end: 1px solid var(--cds-border-subtle-02);
   border-inline-start: 1px solid var(--cds-border-subtle-02);