From d522483f54b374d598435df3bdd15e1becdab059 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 14 Jun 2021 18:24:02 +0100
Subject: [PATCH] Move scrolling to layout level and provide opinionated
 defaults

---
 .../client/src/components/ClientApp.svelte    |  2 -
 packages/client/src/components/Router.svelte  |  1 -
 .../src/layout/Layout.svelte                  | 48 +++++++++++--------
 3 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 684d5ed61c..86e50c9601 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -95,8 +95,6 @@
   #app-root {
     height: 100%;
     width: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
     position: relative;
   }
 </style>
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index f9539e9fe5..f3af2e94a4 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -41,6 +41,5 @@
 <style>
   div {
     position: relative;
-    overflow-x: auto;
   }
 </style>
diff --git a/packages/standard-components/src/layout/Layout.svelte b/packages/standard-components/src/layout/Layout.svelte
index d5bafb62be..56bf83c9cc 100644
--- a/packages/standard-components/src/layout/Layout.svelte
+++ b/packages/standard-components/src/layout/Layout.svelte
@@ -10,6 +10,7 @@
   export let logoUrl = "https://i.imgur.com/Xhdt1YP.png"
   export let hideLogo = false
   export let navigation = "Top"
+  export let sticky = true
 
   export let links = [
     { text: "Some Text", url: "/" },
@@ -28,7 +29,7 @@
 
 <div class="layout layout--{type}" use:styleable={$component.styles}>
   {#if type !== "none"}
-    <div class="nav-wrapper">
+    <div class="nav-wrapper" class:sticky>
       <div class="nav nav--{type}">
         <div class="burger">
           <ActionButton
@@ -85,18 +86,29 @@
 <style>
   /*  Main components */
   .layout {
-    display: grid;
-    position: relative;
-    grid-template-columns: 1fr;
-    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    height: 100%;
+    overflow: auto;
   }
+
   .nav-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
     background: white;
+    z-index: 1;
   }
+  .layout--top .nav-wrapper.sticky {
+    position: sticky;
+    top: 0;
+    left: 0;
+    box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
+  }
+
   .nav {
     flex: 1 1 auto;
     display: grid;
@@ -109,6 +121,7 @@
     flex-direction: row;
     justify-content: center;
     align-items: stretch;
+    flex: 1 1 auto;
   }
   .main {
     flex: 1 1 auto;
@@ -117,6 +130,7 @@
     justify-content: flex-start;
     align-items: stretch;
     max-width: 1400px;
+    position: relative;
   }
 
   /*  Nav components */
@@ -170,14 +184,13 @@
 
   /* Desktop nav overrides */
   @media (min-width: 600px) {
-    .layout--top {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr;
-    }
     .layout--left {
-      grid-template-columns: auto 1fr;
-      grid-template-rows: 1fr;
+      flex-direction: row;
+      overflow: hidden;
+    }
+    .layout--left .main-wrapper {
       height: 100%;
+      overflow: auto;
     }
 
     .nav--top {
@@ -215,18 +228,15 @@
       justify-content: flex-start;
       align-items: stretch;
     }
-    .layout--left .main-wrapper {
-      height: 100%;
-      overflow: auto;
-    }
   }
 
   /* Mobile nav overrides */
   @media (max-width: 600px) {
-    /* Always use top layout on mobile */
-    .layout {
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr;
+    .nav-wrapper {
+      position: sticky;
+      top: 0;
+      left: 0;
+      box-shadow: 0 0 8px -1px rgba(0, 0, 0, 0.075);
     }
 
     /* Show close button in drawer */