Fix webUI layout so signature does not overlay buttons on small screens (#396)

code/html/custom.css

@@ -9,10 +9,6 @@
     display: none;
 }
 .footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
     padding: 10px;
     font-size: 80%;
     color: #999;

code/html/index.html

@@ -1165,14 +1165,14 @@
         <div id="dczRelayTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Switch</label>
-                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>
+                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 dczRelayIdx" name="dczRelayIdx" type="number" min="0" tabindex="0" data="0" /></div>
             </div>
         </div>
 
         <div id="dczMagnitudeTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
-                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0" /></div>
+                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="dczMagnitude" type="number" min="0" tabindex="0" data="0" /></div>
                 <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
             </div>
         </div>
@@ -1180,14 +1180,14 @@
         <div id="tspkRelayTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Switch</label>
-                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0" /></div>
+                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24" name="tspkRelay" type="number" min="0" max="8" tabindex="0" data="0" /></div>
             </div>
         </div>
 
         <div id="tspkMagnitudeTemplate" class="template">
             <div class="pure-g">
                 <label class="pure-u-1 pure-u-lg-1-4">Magnitude</label>
-                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0" /></div>
+                <div class="pure-u-1 pure-u-lg-1-4"><input class="pure-u-1 pure-u-lg-23-24 center" name="tspkMagnitude" type="number" min="0" max="8" tabindex="0" data="0" /></div>
                 <div class="pure-u-1 pure-u-lg-1-2 hint center"></div>
             </div>
         </div>

code/html/side-menu.css

@@ -29,12 +29,12 @@ This is the parent `<div>` that contains the menu and the content area.
     padding-left: 0;
 }
     #layout.active #menu {
-        left: 150px;
-        width: 150px;
+        left: 160px;
+        width: 160px;
     }
 
     #layout.active .menu-link {
-        left: 150px;
+        left: 160px;
     }
 /*
 The content `<div>` is where all your content goes.
@@ -80,8 +80,8 @@ appears on the left side of the page.
 */
 
 #menu {
-    margin-left: -150px; /* "#menu" width */
-    width: 150px;
+    margin-left: -160px; /* "#menu" width */
+    width: 160px;
     position: fixed;
     top: 0;
     left: 0;
@@ -216,21 +216,21 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     }
 
     #layout {
-        padding-left: 150px; /* left col width "#menu" */
+        padding-left: 160px; /* left col width "#menu" */
         left: 0;
     }
     #menu {
-        left: 150px;
+        left: 160px;
     }
 
     .menu-link {
         position: fixed;
-        left: 150px;
+        left: 160px;
         display: none;
     }
 
     #layout.active .menu-link {
-        left: 150px;
+        left: 160px;
     }
 }
 
@@ -243,6 +243,6 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     */
     #layout.active {
         position: relative;
-        left: 150px;
+        left: 160px;
     }
 }