Allow notifications to sit over the nav bar

Closes #4379

- Adjusts the `.viewport` `z-index` propetty to allow notificatons to sit over the nav bar

Looks like a weird fix, but inheritence of z-index was the issue here.

core/client/assets/sass/layouts/default.scss

@@ -23,7 +23,6 @@
     bottom: 0;
     left: 0;
     overflow: hidden;
-    z-index: 500; // Above the .global-nav when collapsed
     transition: transform $settings-menu-transition cubic-bezier($settings-menu-bezier);
 
     @media (max-width: 900px) {
@@ -56,6 +55,16 @@
     }
 }
 
+// A <span> that wraps the main {{outlet}} which created a new z-index stack, separate to the nav
+.viewport-content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 500; // Above the .global-nav when collapsed
+}
+
 
 //
 // The header bar - visible below 900px

core/client/templates/application.hbs

@@ -7,7 +7,9 @@
 <main id="gh-main" class="viewport" role="main" {{bind-attr data-notification-count=topNotificationCount}}>
     {{gh-notifications location="top" notify="topNotificationChange"}}
     {{gh-notifications location="bottom"}}
-    {{outlet}}
+    <span class="viewport-content">
+        {{outlet}}
+    </span>
 </main>
 
 {{outlet modal}}