From f46176fd105fbe9ac8d062bcd871af3f0a77105c Mon Sep 17 00:00:00 2001
From: Alexis Svinartchouk <alexis@resin.io>
Date: Thu, 26 Nov 2020 13:10:20 +0100
Subject: [PATCH] Fix layout when the featured project is not showing

Changelog-entry: Fix layout when the featured project is not showing
Change-type: patch
---
 lib/gui/app/components/progress-button/progress-button.tsx | 4 ++--
 lib/gui/app/pages/main/Flash.tsx                           | 2 ++
 lib/gui/app/pages/main/MainPage.tsx                        | 1 +
 lib/gui/app/theme.ts                                       | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/lib/gui/app/components/progress-button/progress-button.tsx b/lib/gui/app/components/progress-button/progress-button.tsx
index 2e501837..43fe70e0 100644
--- a/lib/gui/app/components/progress-button/progress-button.tsx
+++ b/lib/gui/app/components/progress-button/progress-button.tsx
@@ -23,7 +23,7 @@ import { StepButton } from '../../styled-components';
 
 const FlashProgressBar = styled(ProgressBar)`
 	> div {
-		width: 220px;
+		width: 100%;
 		height: 12px;
 		color: white !important;
 		text-shadow: none !important;
@@ -33,7 +33,7 @@ const FlashProgressBar = styled(ProgressBar)`
 		}
 	}
 
-	width: 220px;
+	width: 100%;
 	height: 12px;
 	margin-bottom: 6px;
 	border-radius: 14px;
diff --git a/lib/gui/app/pages/main/Flash.tsx b/lib/gui/app/pages/main/Flash.tsx
index 8a6dc3cb..544878d2 100644
--- a/lib/gui/app/pages/main/Flash.tsx
+++ b/lib/gui/app/pages/main/Flash.tsx
@@ -156,6 +156,7 @@ interface FlashStepProps {
 	failed: number;
 	speed?: number;
 	eta?: number;
+	width: string;
 }
 
 export interface DriveWithWarnings extends constraints.DrivelistDrive {
@@ -262,6 +263,7 @@ export class FlashStep extends React.PureComponent<
 				<Flex
 					flexDirection="column"
 					alignItems="start"
+					width={this.props.width}
 					style={this.props.style}
 				>
 					<FlashSvg
diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx
index 88f0d4e3..e641c6ef 100644
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -239,6 +239,7 @@ export class MainPage extends React.Component<
 				)}
 
 				<FlashStep
+					width={this.state.isWebviewShowing ? '220px' : '200px'}
 					goToSuccess={() => this.setState({ current: 'success' })}
 					shouldFlashStepBeDisabled={shouldFlashStepBeDisabled}
 					isFlashing={this.state.isFlashing}
diff --git a/lib/gui/app/theme.ts b/lib/gui/app/theme.ts
index ee1e27ad..aff21086 100644
--- a/lib/gui/app/theme.ts
+++ b/lib/gui/app/theme.ts
@@ -100,6 +100,7 @@ export const theme = _.merge({}, Theme, {
 			font-size: 16px;
 
 			&& {
+				width: 200px;
 				height: 48px;
 			}