From 2340af09e28532444a34bc4fcc771c95a426c7dc Mon Sep 17 00:00:00 2001
From: vallode <18506096+vallode@users.noreply.github.com>
Date: Thu, 7 Jul 2022 19:43:14 +0200
Subject: [PATCH] Fix blog banner layout (#2300)

* Fix blog banner layout

* Fix banner stretching with no content
---
 src/renderer/App.css |  8 +++++---
 src/renderer/App.vue | 32 ++++++++++++++++----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/renderer/App.css b/src/renderer/App.css
index 70b98ebb..11b789b3 100644
--- a/src/renderer/App.css
+++ b/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 {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 9b00dc40..56969317 100644
--- a/src/renderer/App.vue
+++ b/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"