mgr/dashboard: Fix breaking layout in overview page

Issue:

One opening the notification panel overview page breaks.

Reason:

Due to the css grid used in notification panel and flex grid in overview page.

Fix:

Removed css grid from the notification header

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

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
index 55e30a50e554635acb88df93ea4eb552a8121867..2906f9bba1c12de28ed81603535a1d1fc673dbd3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.html
@@ -1,39 +1,23 @@
-<div cdsGrid
-     class="notification-header"
-     [useCssGrid]="true"
-     [fullWidth]="true">
-  <div cdsCol
-       [columnNumbers]="{sm: 8, md: 8, lg: 16}">
-    <div cdsRow>
-      <div
-        cdsGrid
-        [useCssGrid]="true"
-        [fullWidth]="true">
-        <h1
-          [columnNumbers]="{sm: 8, md: 8, lg: 11}"
-          i18n
-          cdsCol
-          class="cds--type-heading-compact-01">Tasks and Notifications</h1>
-        <button
-          cdsCol
-          [columnNumbers]="{sm: 8, md: 8, lg: 5}"
-          class="notification-header__dismiss-btn"
-          i18n
-          cdsButton="ghost"
-          size="sm"
-          (click)="onDismissAll()">
-          Dismiss all
-        </button>
-      </div>
-    </div>
-    <cds-toggle
-      cdsRow
-      [checked]="isMuted"
+<div class="notification-header">
+  <div class="notification-header__heading-and-button">
+    <h1
+      i18n
+      class="cds--type-heading-compact-01">Tasks and Notifications</h1>
+    <button
+      class="notification-header__dismiss-btn"
+      i18n
+      cdsButton="ghost"
       size="sm"
-      (checkedChange)="onToggleMute()"
-      label="Mute notifications"
-      i18n-label
-      hideLabel="true"> <!--hides the toggle state values (like "On/Off" in the toggle button)-->
-    </cds-toggle>
+      (click)="onDismissAll()">
+      Dismiss all
+    </button>
   </div>
+  <cds-toggle
+    [checked]="isMuted"
+    size="sm"
+    (checkedChange)="onToggleMute()"
+    label="Mute notifications"
+    i18n-label
+    hideLabel="true"> <!--hides the toggle state values (like "On/Off" in the toggle button)-->
+  </cds-toggle>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
index 332ceaf5377135b946b412d7129087f6ba25549b..fef7cb5f3f6d4f29b49b0ce776bf508b5c4647b0 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/navigation/notification-panel/notification-header/notification-header.component.scss
@@ -19,4 +19,10 @@
     padding-top: 0;
     padding-left: spacing.$spacing-06;
   }
+
+  &__heading-and-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 }