From b7f8c8368c1e79b15725edf5580ca7385d397dc7 Mon Sep 17 00:00:00 2001
From: Alexis Svinartchouk <alexis@resin.io>
Date: Mon, 24 Aug 2020 15:40:25 +0200
Subject: [PATCH] Fix settings button not being clickable

Change-type: patch
---
 lib/gui/app/css/main.css            |  5 ---
 lib/gui/app/pages/main/MainPage.tsx | 53 ++++++++++++++++-------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/lib/gui/app/css/main.css b/lib/gui/app/css/main.css
index 03ab634d..b5350722 100644
--- a/lib/gui/app/css/main.css
+++ b/lib/gui/app/css/main.css
@@ -49,11 +49,6 @@ body {
   -webkit-overflow-scrolling: touch;
 }
 
-/* Allow window to be dragged from header */
-#app-header {
-  -webkit-app-region: drag;
-}
-
 /* Prevent blue outline */
 a:focus,
 input:focus,
diff --git a/lib/gui/app/pages/main/MainPage.tsx b/lib/gui/app/pages/main/MainPage.tsx
index efecb712..09d257f5 100644
--- a/lib/gui/app/pages/main/MainPage.tsx
+++ b/lib/gui/app/pages/main/MainPage.tsx
@@ -163,41 +163,42 @@ export class MainPage extends React.Component<
 		return (
 			<>
 				<Flex
-					id="app-header"
-					justifyContent="center"
+					justifyContent="space-between"
+					alignItems="center"
+					paddingTop="14px"
 					style={{
-						width: '100%',
-						height: '50px',
-						padding: '13px 14px',
-						textAlign: 'center',
+						// Allow window to be dragged from header
+						// @ts-ignore
+						'-webkit-app-region': 'drag',
 						position: 'relative',
 						zIndex: 1,
 					}}
 				>
-					<EtcherSvg
-						width="123px"
-						height="22px"
-						style={{
-							cursor: 'pointer',
-						}}
-						onClick={() =>
-							openExternal('https://www.balena.io/etcher?ref=etcher_footer')
-						}
-						tabIndex={100}
-					/>
+					<Flex width="100%" />
+					<Flex width="100%" alignItems="center" justifyContent="center">
+						<EtcherSvg
+							width="123px"
+							height="22px"
+							style={{
+								cursor: 'pointer',
+							}}
+							onClick={() =>
+								openExternal('https://www.balena.io/etcher?ref=etcher_footer')
+							}
+							tabIndex={100}
+						/>
+					</Flex>
 
-					<Flex
-						style={{
-							float: 'right',
-							position: 'absolute',
-							right: 0,
-						}}
-					>
+					<Flex width="100%" alignItems="center" justifyContent="flex-end">
 						<Icon
 							icon={<CogSvg height="1em" fill="currentColor" />}
 							plain
 							tabIndex={5}
 							onClick={() => this.setState({ hideSettings: false })}
+							style={{
+								// Make touch events click instead of dragging
+								'-webkit-app-region': 'no-drag',
+							}}
 						/>
 						{!settings.getSync('disableExternalLinks') && (
 							<Icon
@@ -209,6 +210,10 @@ export class MainPage extends React.Component<
 									)
 								}
 								tabIndex={6}
+								style={{
+									// Make touch events click instead of dragging
+									'-webkit-app-region': 'no-drag',
+								}}
 							/>
 						)}
 					</Flex>