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 3727444244894ca89c34ffa39fbfe3e25b1c945f..0e1c00d2f9a4e880efa343a0dda5653becf2b995 100644 (file)
--- 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 29250ed22d5deea5dc447b312f63745f9248d5e2..25813e0b93389df3c25de89de1bb2c56bc9883a6 100644 (file)
--- 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 745c39c530331ff92eb6c71282c71e00fb8d6a88..06de60ff49c4568faa5748bb42ebf7c3a967027b 100644 (file)
--- 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);