Fix blog banner layout (#2300)

* Fix blog banner layout

* Fix banner stretching with no content

src/renderer/App.css

@@ -15,12 +15,14 @@
 }
 
 .banner {
-  width: 85%;
+  margin: 16px auto 0 auto;
+  width: 90%;
 }
 
 .flexBox {
-  margin-top: 60px;
-  margin-bottom: -75px;
+  margin: 0;
+  flex: 1 1 0%;
+  flex-direction: column;
 }
 
 #changeLogText {

src/renderer/App.vue

@@ -9,10 +9,8 @@
   >
     <top-nav ref="topNav" />
     <side-nav ref="sideNav" />
-    <ft-flex-box
-      v-if="showUpdatesBanner || showBlogBanner"
-      class="flexBox routerView"
-    >
+
+    <ft-flex-box class="flexBox">
       <ft-notification-banner
         v-if="showUpdatesBanner"
         class="banner"
@@ -25,19 +23,21 @@
         :message="blogBannerMessage"
         @click="handleNewBlogBannerClick"
       />
+
+      <transition
+        v-if="dataReady"
+        mode="out-in"
+        name="fade"
+      >
+        <!-- <keep-alive> -->
+        <RouterView
+          ref="router"
+          class="routerView"
+        />
+        <!-- </keep-alive> -->
+      </transition>
     </ft-flex-box>
-    <transition
-      v-if="dataReady"
-      mode="out-in"
-      name="fade"
-    >
-      <!-- <keep-alive> -->
-      <RouterView
-        ref="router"
-        class="routerView"
-      />
-      <!-- </keep-alive> -->
-    </transition>
+
     <ft-prompt
       v-if="showReleaseNotes"
       @click="showReleaseNotes = !showReleaseNotes"