Fix size and position of header notification badge icon (#4778)

* Fix size and position of header notification badge icon

* Ensure override also applies to dark mode
- dark mode brings back in i think specific overrides by material design
- ensure our overrides are more specific
- flicking between light/dark mode now shows no difference

Co-authored-by: Richard Cox <richard.cox@suse.com>

src/frontend/packages/core/sass/mat-desktop.scss

@@ -122,6 +122,13 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
       width: 20px;
     }
 
+    .page-header__notification-button .mat-badge-medium.mat-badge-overlap .mat-badge-content {
+      height: 18px;
+      line-height: 18px;
+      right: -8px;
+      top: -8px;
+      width: 18px;
+    }
   }
 
   .dashboard .dashboard__inner {

src/frontend/packages/core/src/shared/components/page-header/page-header.component.scss

@@ -99,6 +99,7 @@ $bottom-index: $top-index - 1;
     height: 20vh;
   }
   &__divider {
+    cursor: default;
     opacity: .3;
     padding: 0 10px 0 5px;
   }

src/frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss

@@ -51,7 +51,11 @@
       color: $underflow-foreground;
     }
     &__divider {
-      color: mat-contrast($primary, 500);
+      @if $header-border and $header-border != 'none' {
+        color: $header-border;
+      } @else {
+        color: mat-contrast($primary, 500);
+      }
     }
     &__menu-icon {
       background-color: mat-contrast($primary, 500);