Fix for banner and too far scrolling (#2399)

* Fix for banner and too far scrolling

* Update App.css

src/renderer/App.css

@@ -7,6 +7,7 @@
   display: flex;
   flex-wrap: wrap;
   font-family: 'Roboto', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  height: 100%;
 }
 
 .routerView {
@@ -15,14 +16,13 @@
 }
 
 .banner {
-  margin: 16px auto 0 auto;
-  width: 90%;
+  width: 80%;
+  margin: 0 auto;
 }
 
 .flexBox {
-  margin: 0;
-  flex: 1 1 0%;
-  flex-direction: column;
+  margin-top: 60px;
+  display: block;
 }
 
 #changeLogText {
@@ -44,7 +44,8 @@
   }
 
   .banner {
-    width: 90%;
+    width: 80%;
+    margin-top: 60px;
   }
 
   .flexBox {

src/renderer/App.vue

@@ -9,8 +9,12 @@
   >
     <top-nav ref="topNav" />
     <side-nav ref="sideNav" />
-
-    <ft-flex-box class="flexBox">
+    <ft-flex-box
+      class="flexBox routerView"
+    >
+      <div
+        v-if="showUpdatesBanner || showBlogBanner"
+      >
         <ft-notification-banner
           v-if="showUpdatesBanner"
           class="banner"
@@ -23,7 +27,7 @@
           :message="blogBannerMessage"
           @click="handleNewBlogBannerClick"
         />
-
+      </div>
       <transition
         v-if="dataReady"
         mode="out-in"