From fbf14cd130c6f7f73697fad28730da485cb7c946 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Wed, 19 Sep 2018 15:52:39 -0230
Subject: [PATCH] Prevent loading screen from overlaying the app bar

Refs #4417

This change is functional copy of 3893469 that solves the problem in a way
that doesn't depend on the height of the app bar since the app bar isn't a
fixed height in the smaller views.
---
 ui/app/app.js                                    | 12 +++++++-----
 ui/app/components/page-container/index.scss      |  2 ++
 ui/app/css/itcss/components/loading-overlay.scss |  2 +-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index c93f93e75..7c92bcf74 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -152,12 +152,14 @@ class App extends Component {
 
         h(AccountMenu),
 
-        (isLoading || isLoadingNetwork) && h(Loading, {
-          loadingMessage: loadMessage,
-        }),
+        h('div.main-container', [
+          (isLoading || isLoadingNetwork) && h(Loading, {
+            loadingMessage: loadMessage,
+          }),
 
-        // content
-        this.renderRoutes(),
+          // content
+          this.renderRoutes(),
+        ]),
       ])
     )
   }
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index 14cdbacd3..61434cbcf 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -182,5 +182,7 @@
     max-height: 82vh;
     min-height: 570px;
     flex: 0 0 auto;
+    margin-right: auto;
+    margin-left: auto;
   }
 }
diff --git a/ui/app/css/itcss/components/loading-overlay.scss b/ui/app/css/itcss/components/loading-overlay.scss
index 38627af17..17f12ab73 100644
--- a/ui/app/css/itcss/components/loading-overlay.scss
+++ b/ui/app/css/itcss/components/loading-overlay.scss
@@ -1,6 +1,6 @@
 .loading-overlay {
   left: 0;
-  z-index: 50;
+  z-index: 256;
   position: absolute;
   flex-direction: column;
   display: flex;