From b872ac6e6822af55b436f8b9bbb206191fdd9c0b Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Mon, 17 Apr 2023 13:50:43 +1200
Subject: [PATCH] line up all icons and paddings with consistency, return auto
 bake checkbox on mobile UI

---
 src/web/html/index.html                  | 13 ++++++++++---
 src/web/stylesheets/layout/_banner.css   |  2 ++
 src/web/stylesheets/layout/_controls.css | 10 +++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index 0668a1fd..289e4571 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -147,8 +147,15 @@
         <div id="content-wrapper">
             <!-- banner -->
             <div id="banner" class="row">
-                <div style="text-align: left; padding-left: 10px;">
-                    <a href="#" data-toggle="modal" data-target="#download-modal" data-help-title="Downloading CyberChef" data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">Download CyberChef <i class="material-icons">file_download</i></a>
+                <div>
+                    <a href="#"
+                       data-toggle="modal"
+                       data-target="#download-modal"
+                       data-help-title="Downloading CyberChef"
+                       data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">
+                        Download CyberChef
+                        <i class="material-icons">file_download</i>
+                    </a>
                 </div>
                 <div id="notice-wrapper" class="desktop-only">
                     <span id="notice">
@@ -162,7 +169,7 @@
                         <noscript>JavaScript is not enabled. Good luck.</noscript>
                     </span>
                 </div>
-                <div style="text-align: right; padding-right: 0;">
+                <div>
                     <a href="#"
                        id="options"
                        data-help-title="Options and Settings"
diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index ff5025c5..241d6499 100755
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -17,6 +17,8 @@
     margin: 0;
     /* flex is applied through .row on the banner element */
     justify-content: space-between;
+    padding-left: 12px;
+    padding-right: 4px;
 }
 
 #banner i {
diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css
index 3f257ad7..a1a9d064 100755
--- a/src/web/stylesheets/layout/_controls.css
+++ b/src/web/stylesheets/layout/_controls.css
@@ -31,7 +31,15 @@
     color: var(--primary-font-colour);
     font-size: 14px;
     cursor: pointer;
-    line-height: 0;
+    /*line-height: 0;*/
+}
+
+#auto-bake {
+    position: relative;
+    width: auto;
+    height: auto;
+    opacity: 1;
+    z-index: initial;
 }
 
 #auto-bake-label .check,