Fix stacking of notification dot (#6875)

crisbeto · web-flow · commit 2d087bd3dc29 · 2024-07-03T07:49:14.000-07:00
An upcoming change in Angular Material (angular/components#29291) changes the `z-index` of icons which ended up putting it behind the notification dot. This change adds an explicit `z-index` to the dot to ensure that it's on top of the icon.
diff --git a/tensorboard/webapp/notification_center/_views/notification_center_component.scss b/tensorboard/webapp/notification_center/_views/notification_center_component.scss
@@ -28,6 +28,7 @@ limitations under the License.
   right: 10px;
   top: 10px;
   width: $_dim;
+  z-index: 2;
 }
 
 ::ng-deep .notification-menu.mat-mdc-menu-panel {

Original file line number	Diff line number	Diff line change
`@@ -28,6 +28,7 @@ limitations under the License.`
`28`	`28`	`right: 10px;`
`29`	`29`	`top: 10px;`
`30`	`30`	`width: $_dim;`
	`31`	`+ z-index: 2;`
`31`	`32`	`}`
`32`	`33`
`33`	`34`	`::ng-deep .notification-menu.mat-mdc-menu-panel {`