mgr/dashboard: fix: toast notifications hiding utility menu

* Fixed margin-top taking into account responsiveness.
* dropdown-menu class: set z-index to avoid notification
  hiding dropdown menus when menu item clicked.

Fixes: https://tracker.ceph.com/issues/38313
Signed-off-by: Alfonso Martínez <almartin@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
index 3c6ef116106c32f3e51382e1265ad09471ea421d..936627290189c25816fd03a0a2144040987f8d1c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/app.component.scss
@@ -5,3 +5,27 @@
   margin: 0;
   padding: 0;
 }
+
+::ng-deep #toast-container {
+  margin-top: 2vw;
+
+  @media (max-width: 1600px) {
+    margin-top: 2.5vw;
+  }
+
+  @media (max-width: $screen-sm-max) {
+    margin-top: 9vw;
+  }
+
+  @media (max-width: 900px) {
+    margin-top: 10vw;
+  }
+
+  @media (max-width: 319px) {
+    margin-top: 11vw;
+  }
+
+  @media (max-width: 260px) {
+    margin-top: 14vw;
+  }
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/styles.scss b/src/pybind/mgr/dashboard/frontend/src/styles.scss
index 8022f494994d9312d8962fa1ab68971abcd232ba..147374c26324975b016792ae13aa29207919d100 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/styles.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/styles.scss
@@ -159,6 +159,7 @@ button.btn.btn-label > i.fa {
 /* Dropdown */
 .dropdown-menu {
   min-width: 50px;
+  z-index: 999999;
 }
 .dropdown-menu > li > a {
   color: $color-dropdown-menu;