Fixes progress bar layer, snack bar color, listing menu panel width

dmp-frontend/src/app/library/notification/snack-bar/snack-bar-notification.component.html

@@ -1 +1 @@
-{{message}}
+<span class="snackBar">{{message}}</span>

dmp-frontend/src/app/library/notification/snack-bar/snack-bar-notification.component.scss

@@ -0,0 +1,3 @@
+.snackBar {
+  color: white;
+}

dmp-frontend/src/app/library/notification/snack-bar/snack-bar-notification.component.ts

@@ -4,7 +4,8 @@ import { SnackBarNotification } from '../../../core/services/notification/ui-not
 
 @Component({
 	selector: 'app-snack-bar-notification',
-	templateUrl: './snack-bar-notification.component.html'
+	templateUrl: './snack-bar-notification.component.html',
+	styleUrls: ['./snack-bar-notification.component.scss']
 })
 
 export class SnackBarNotificationComponent {

dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss

@@ -108,5 +108,9 @@ p {
 }
 
 .role {
-	min-width: 74px;
+  min-width: 74px;
+}
+
+::ng-deep .mat-menu-panel {
+  max-width: 282px !important;
 }

dmp-frontend/src/app/ui/misc/navigation/navigation.component.scss

@@ -21,7 +21,7 @@
 			margin-right: 30px;
 			margin-left: 20px;
 		}
-		
+
 	}
 
 	.progress-bar {
@@ -29,9 +29,9 @@
 		left: 0;
 		position: fixed;
 		width: 100%;
-		z-index: 1;
+		z-index: 4;
 	}
-	
+
 }
 .two-line-mat-option {
 	height: 3.5em;
@@ -39,5 +39,5 @@
 }
 .buttonNav:hover {
 	color: aliceblue;
-	
-   }
+
+   }

dmp-frontend/src/app/ui/navbar/navbar.component.scss

@@ -12,7 +12,7 @@ $mat-card-header-size: 40px !default;
 	left: 0;
 	width: 100%;
 	position: fixed;
-	z-index: 1;
+	z-index: 4;
 }
 
 .fixed-navbar {