From b6256fa24fe2c29fdd1ce4656fbee5aacf11aaf4 Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Mon, 26 Mar 2018 02:35:44 +0300
Subject: [PATCH 1/4] Recalculate header line-height

---
 code/html/custom.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/code/html/custom.css b/code/html/custom.css
index 770f0f0d..0b0153a4 100644
--- a/code/html/custom.css
+++ b/code/html/custom.css
@@ -30,6 +30,10 @@
     color: #777777;
 }
 
+.header > h1 {
+    line-height: 100%;
+}
+
 h2 {
     font-size: 1em;
 }

From 8513b74a66bc7c56e8844ca4c317a662b7445786 Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Thu, 29 Mar 2018 17:03:24 +0300
Subject: [PATCH 2/4] Hint should be displayed

---
 code/html/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/html/index.html b/code/html/index.html
index ba7db67a..dedbb45b 100644
--- a/code/html/index.html
+++ b/code/html/index.html
@@ -539,7 +539,7 @@
                                     <div class=" pure-u-1-4 pure-u-lg-1-8"><button class="pure-button button-upgrade-browse pure-u-23-24">Browse</button></div>
                                     <div class=" pure-u-1-4 pure-u-lg-1-8"><button class="pure-button button-upgrade pure-u-23-24">Upgrade</button></div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
-                                    <div class="pure-u-0 pure-u-lg-3-4 hint">The device has <span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing a <a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" target="_blank"><strong>two-step update</strong></a>.</div>
+                                    <div class="pure-u-1 pure-u-lg-3-4 hint">The device has <span name="free_size"></span> bytes available for OTA updates. If your image is larger than this consider doing a <a href="https://github.com/xoseperez/espurna/wiki/TwoStepUpdates" target="_blank"><strong>two-step update</strong></a>.</div>
                                     <div class="pure-u-0 pure-u-lg-1-4"></div>
                                     <div class="pure-u-1 pure-u-lg-3-4"><progress id="upgrade-progress"></progress></div>
                                     <input name="upgrade" type="file" tabindex="16" />

From dd1d459ba276f79a1bbb341f7826073c910750fe Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Thu, 29 Mar 2018 17:14:23 +0300
Subject: [PATCH 3/4] Move settings backup/restore/reset to the top

Avoid accidental clicks on nearby buttons.
Realign buttons to be in one row.
---
 code/html/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/code/html/index.html b/code/html/index.html
index dedbb45b..76c63564 100644
--- a/code/html/index.html
+++ b/code/html/index.html
@@ -447,6 +447,13 @@
 
                             <fieldset>
 
+                                <div class="pure-g">
+                                    <label class="pure-u-1 pure-u-lg-1-4">Settings</label>
+                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-backup pure-u-23-24">Backup</button></div>
+                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-restore pure-u-23-24">Restore</button></div>
+                                    <div class="pure-u-1-3 pure-u-lg-1-4"><button class="pure-button button-settings-factory pure-u-1">Factory Reset</button></div>
+                                </div>
+
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Admin password</label>
                                     <input name="adminPass" class="pure-u-1 pure-u-lg-3-4" type="password" action="reboot" tabindex="11" autocomplete="false" />
@@ -526,13 +533,6 @@
                                     <div class="pure-u-1 pure-u-lg-3-4 hint">This name address of the NoFUSS server for automatic remote updates (see https://bitbucket.org/xoseperez/nofuss).</div>
                                 </div>
 
-                                <div class="pure-g">
-                                    <label class="pure-u-1 pure-u-lg-1-4">Settings</label>
-                                    <div class="pure-u-1-2 pure-u-lg-1-8"><button class="pure-button button-settings-backup pure-u-23-24">Backup</button></div>
-                                    <div class="pure-u-1-2 pure-u-lg-1-8"><button class="pure-button button-settings-restore pure-u-23-24">Restore</button></div>
-                                    <div class="pure-u-1-4 pure-u-lg-1-4"><button class="pure-button button-settings-factory pure-u-1">Factory Reset</button></div>
-                                </div>
-
                                 <div class="pure-g">
                                     <label class="pure-u-1 pure-u-lg-1-4">Upgrade</label>
                                     <input class="pure-u-1-2 pure-u-lg-1-2" name="filename" type="text" readonly />

From 6f31111e7f2f2e28be1bbed8c98e9570cb48fc72 Mon Sep 17 00:00:00 2001
From: Maxim Prokhorov <prokhorov.max@outlook.com>
Date: Thu, 29 Mar 2018 17:24:24 +0300
Subject: [PATCH 4/4] Downsize header to fit the screen

---
 code/html/custom.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/code/html/custom.css b/code/html/custom.css
index 0b0153a4..9002e6fa 100644
--- a/code/html/custom.css
+++ b/code/html/custom.css
@@ -30,8 +30,11 @@
     color: #777777;
 }
 
-.header > h1 {
-    line-height: 100%;
+@media screen and (max-width: 32em) {
+    .header > h1 {
+        line-height: 100%;
+        font-size: 2em;
+    }
 }
 
 h2 {