bugfix(z-index): Fixed several z-index problems, progress-bar inside nya deltagare is now hidden behind the header when scrolling. (TV-551)

Squashed commit of the following:

commit 87b53c3d03f71b5cfd6e632e39a3f2723deecdee
Author: Erik Tiekstra <erik.tiekstra@arbetsformedlingen.se>
Date:   Thu Sep 16 10:57:12 2021 +0200

    Fixed issue with z-indexes

apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/employee-form.component.scss

@@ -2,6 +2,8 @@
 @import 'variables/gutters';
 
 .employee-form {
+  position: relative;
+
   &__header {
     display: flex;
     justify-content: space-between;

apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.html

@@ -1,5 +1,5 @@
 <div class="employees-list">
-  <msfa-loader *ngIf="employeesLoading" [fullScreen]="true"></msfa-loader>
+  <msfa-loader *ngIf="employeesLoading" type="absolute"></msfa-loader>
   <digi-table af-variation="secondary">
     <table>
       <thead>

apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.scss

@@ -1,4 +1,5 @@
 @import 'variables/gutters';
+@import 'variables/z-index';
 
 .avrop {
   &__header {
@@ -16,6 +17,10 @@
     margin-bottom: $digi--layout--gutter--xl;
   }
 
+  &__progress-bar {
+    z-index: $msfa__z-index-default;
+  }
+
   &__select-handledare {
     max-width: var(--digi--typography--text--max-width);
     margin-bottom: $digi--layout--gutter--xl;

apps/mina-sidor-fa/src/app/pages/start/start.component.html

@@ -3,18 +3,18 @@
     <section class="start">
       <header class="start__header">
         <div class="start__image-wrapper">
-          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
           <digi-media-image
             af-src="/assets/images/start_1280w.jpg"
             af-srcset="
               assets/images/start_600w.jpg  800w,
               assets/images/start_800w.jpg  1050w,
               assets/images/start_1000w.jpg 1200w
-            "
+              "
             af-alt="En kvinna som tittar i kameran"
             af-width="1000"
             af-height="465"
           ></digi-media-image>
+          <h1 class="start__heading">Välkommen {{ userFullName$ | async }}</h1>
         </div>
         <ng-container *ngIf="isAuthorizedUser(userRoles); else unauthorizedRef">
           <p>
@@ -36,5 +36,5 @@
 </msfa-layout>
 
 <ng-template #loadingRef>
-  <msfa-loader [fullScreen]="true"></msfa-loader>
+  <msfa-loader type="full-screen"></msfa-loader>
 </ng-template>

apps/mina-sidor-fa/src/app/pages/start/start.component.scss

@@ -15,6 +15,5 @@
     background-color: var(--digi--ui--color--complementary-alt);
     color: var(--digi--typography--color--text--light);
     padding: $digi--layout--gutter--s $digi--layout--gutter--l;
-    z-index: 1;
   }
 }