From 992b8a6fb6d3d1bfa4f0fdd85f3cc5d03c75a58f Mon Sep 17 00:00:00 2001
From: Stevche Radevski <sradevski@live.com>
Date: Fri, 6 Dec 2019 15:07:26 +0100
Subject: [PATCH] Fix layout when flashing

Change-type: patch
Signed-off-by: Stevche Radevski <stevche@balena.io>
---
 lib/gui/app/pages/main/MainPage.tsx | 13 ++++++-------
 lib/gui/app/scss/main.scss          |  2 +-
 lib/gui/css/main.css                |  4 ++--
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx
index df02e39a..45787241 100644
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -104,13 +104,12 @@ const MainPage = ({ DriveSelectorService, $state }: any) => {
 				</div>
 
 				{isFlashing && (
-					<div>
-						<FeaturedProject
-							className={
-								isFlashing && isWebviewShowing ? 'fp-visible' : undefined
-							}
-							onWebviewShow={setWebviewShowing}
-						/>
+					<div
+						className={`featured-project ${
+							isFlashing && isWebviewShowing ? 'fp-visible' : ''
+						}`}
+					>
+						<FeaturedProject onWebviewShow={setWebviewShowing} />
 					</div>
 				)}
 
diff --git a/lib/gui/app/scss/main.scss b/lib/gui/app/scss/main.scss
index 3049fac2..dab15e45 100644
--- a/lib/gui/app/scss/main.scss
+++ b/lib/gui/app/scss/main.scss
@@ -230,7 +230,7 @@ body {
   }
 }
 
-featured-project {
+.featured-project {
   webview {
     flex: 0 1;
     height: 0;
diff --git a/lib/gui/css/main.css b/lib/gui/css/main.css
index c9a35d8d..baed047c 100644
--- a/lib/gui/css/main.css
+++ b/lib/gui/css/main.css
@@ -9882,12 +9882,12 @@ body {
   .section-header * {
     z-index: 1; }
 
-featured-project webview {
+.featured-project webview {
   flex: 0 1;
   height: 0;
   width: 0; }
 
-featured-project.fp-visible webview {
+.featured-project.fp-visible webview {
   width: 480px;
   height: 360px;
   position: absolute;