improved mobile keyboard layout

4 files changed, 439 insertions, 216 deletions

diff --git a/web/kvm/index.html b/web/kvm/index.html
index 26c798d1..6d64ec5a 100644
--- a/web/kvm/index.html
+++ b/web/kvm/index.html
@@ -772,21 +772,26 @@
       <div class="keypad" id="stream-mouse-buttons" align="center">
         <div class="keypad-block">
           <div class="keypad-row">
-            <div class="key wide-4 left small" data-code="left"><span>Mouse<br>Left</span></div>
-            <div class="modifier wide-2 left small" data-code="left"><span><b>&bull;</b><br>&larr; Hold</span></div>
-            <div class="empty-key" style="width:10px"></div>
-            <div class="key wide-2 left small" data-code="middle"><span>Mouse<br>Middle</span></div>
-            <div class="modifier wide-2 left small" data-code="middle"><span><b>&bull;</b><br>&larr; Hold</span></div>
-            <div class="empty-key" style="width:10px"></div>
-            <div class="modifier wide-2 right small" data-code="right"><span><b>&bull;</b><br>Hold &rarr;</span></div>
-            <div class="key wide-4 right small" data-code="right"><span>Mouse<br>Right</span></div>
-          </div>
-          <div class="keypad-row" style="display:none">
-            <div class="key wide-4 left small" data-code="up"><span>Mouse<br>Up/Back</span></div>
-            <div class="modifier wide-2 left small" data-code="up"><span><b>&bull;</b><br>&larr; Hold</span></div>
-            <div class="empty-key" style="width:10px"></div>
-            <div class="modifier wide-2 right small" data-code="down"><span><b>&bull;</b><br>Hold &rarr;</span></div>
-            <div class="key wide-4 right small" data-code="down"><span>Mouse<br>Down/Fw</span></div>
+            <div class="key wide-3 left rounded-left" data-code="left">
+              <div class="label">Left</div>
+            </div>
+            <div class="modifier left small rounded-right" data-code="left">
+              <div class="label"><b>&bull;</b><br>Hold</div>
+            </div>
+            <div class="empty" style="width:15px"></div>
+            <div class="key wide-1 left rounded-left" data-code="middle">
+              <div class="label">Mid</div>
+            </div>
+            <div class="modifier left small rounded-right" data-code="middle">
+              <div class="label"><b>&bull;</b><br>Hold</div>
+            </div>
+            <div class="empty" style="width:15px"></div>
+            <div class="modifier right small rounded-left" data-code="right">
+              <div class="label"><b>&bull;</b><br>Hold</div>
+            </div>
+            <div class="key wide-3 right rounded-right" data-code="right">
+              <div class="label">Right</div>
+            </div>
           </div>
         </div>
       </div>
@@ -803,53 +808,74 @@
                   <div class="label">Esc
                   </div>
                 </div>
-                <div class="empty-key" style="width:24px"></div>
+                <div class="spacer-fixed"></div>
+                <div class="empty " style="width:24px">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F1">
                   <div class="label">F1
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F2">
                   <div class="label">F2
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F3">
                   <div class="label">F3
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F4">
                   <div class="label">F4
                   </div>
                 </div>
-                <div class="empty-key" style="width:10px"></div>
+                <div class="spacer"></div>
+                <div class="empty " style="width:10px">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F5">
                   <div class="label">F5
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F6">
                   <div class="label">F6
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F7">
                   <div class="label">F7
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F8">
                   <div class="label">F8
                   </div>
                 </div>
-                <div class="empty-key" style="width:10px"></div>
+                <div class="spacer"></div>
+                <div class="empty " style="width:10px">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F9">
                   <div class="label">F9
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F10">
                   <div class="label">F10
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F11">
                   <div class="label">F11
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="F12">
                   <div class="label">F12
                   </div>
@@ -861,217 +887,266 @@
                   <div class="label">~<br>`
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit1">
                   <div class="label">!<br>1
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit2">
                   <div class="label">@<br>2
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit3">
                   <div class="label">#<br>3
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit4">
                   <div class="label">$<br>4
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit5">
                   <div class="label">%<br>5
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit6">
                   <div class="label">^<br>6
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit7">
                   <div class="label">&amp;<br>7
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit8">
                   <div class="label">*<br>8
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit9">
                   <div class="label">(<br>9
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit0">
                   <div class="label">)<br>0
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Minus">
                   <div class="label">_<br>-
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Equal">
                   <div class="label">+<br>=
                   </div>
                 </div>
-                <div class="key wide-2 right" data-code="Backspace">
+                <div class="spacer-fixed"></div>
+                <div class="key wide-1 right" data-code="Backspace">
                   <div class="label">&#8612;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="key wide-2 left" data-code="Tab">
+                <div class="key wide-1 left" data-code="Tab">
                   <div class="label">&#8676;<br>&#8677;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key single" data-code="KeyQ">
                   <div class="label">Q
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyW">
                   <div class="label">W
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyE">
                   <div class="label">E
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyR">
                   <div class="label">R
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyT">
                   <div class="label">T
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyY">
                   <div class="label">Y
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyU">
                   <div class="label">U
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyI">
                   <div class="label">I
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyO">
                   <div class="label">O
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyP">
                   <div class="label">P
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="BracketLeft">
                   <div class="label">{<br>[
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="BracketRight">
                   <div class="label">}<br>]
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Backslash">
                   <div class="label">|<br>&bsol;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="key wide-3 left small" data-code="CapsLock">
+                <div class="key wide-2 left small" data-code="CapsLock">
                   <div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key single" data-code="KeyA">
                   <div class="label">A
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyS">
                   <div class="label">S
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyD">
                   <div class="label">D
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyF">
                   <div class="label">F
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyG">
                   <div class="label">G
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyH">
                   <div class="label">H
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyJ">
                   <div class="label">J
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyK">
                   <div class="label">K
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyL">
                   <div class="label">L
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Semicolon">
                   <div class="label">:<br>;
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Quote">
                   <div class="label">"<br>'
                   </div>
                 </div>
-                <div class="key wide-3 right small" data-code="Enter">
+                <div class="spacer-fixed"></div>
+                <div class="key wide-2 right small" data-code="Enter">
                   <div class="label">Enter<br>&crarr;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="modifier wide-4 left small" data-code="ShiftLeft">
+                <div class="modifier wide-3 left small" data-code="ShiftLeft">
                   <div class="label"><b>&bull;</b><br>Shift
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key single" data-code="KeyZ">
                   <div class="label">Z
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyX">
                   <div class="label">X
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyC">
                   <div class="label">C
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyV">
                   <div class="label">V
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyB">
                   <div class="label">B
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyN">
                   <div class="label">N
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyM">
                   <div class="label">M
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Comma">
                   <div class="label">&lt;<br>,
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Period">
                   <div class="label">&gt;<br>.
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Slash">
                   <div class="label">?<br>/
                   </div>
                 </div>
-                <div class="modifier wide-4 right small" data-code="ShiftRight">
+                <div class="spacer-fixed"></div>
+                <div class="modifier wide-3 right small" data-code="ShiftRight">
                   <div class="label"><b>&bull;</b><br>Shift
                   </div>
                 </div>
@@ -1081,26 +1156,32 @@
                   <div class="label"><b>&bull;</b><br>Ctrl
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="modifier wide-1 left small" data-code="MetaLeft">
                   <div class="label"><b>&bull;</b><br>Win
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="modifier wide-1 left small" data-code="AltLeft">
                   <div class="label"><b>&bull;</b><br>Alt
                   </div>
                 </div>
-                <div class="key wide-5" data-code="Space">
+                <div class="spacer-fixed"></div>
+                <div class="key wide-4" data-code="Space">
                   <div class="label">
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="modifier wide-1 right small" data-code="AltRight">
                   <div class="label"><b>&bull;</b><br>Alt
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="modifier wide-1 right small" data-code="MetaRight">
                   <div class="label"><b>&bull;</b><br>Win
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="modifier wide-1 right small" data-code="ControlRight">
                   <div class="label"><b>&bull;</b><br>Ctrl
                   </div>
@@ -1113,10 +1194,12 @@
                   <div class="label"><b>&bull;</b><br>Pt/Sq
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="ScrollLock">
                   <div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Pause">
                   <div class="label">P/Brk
                   </div>
@@ -1128,10 +1211,12 @@
                   <div class="label">Ins
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Home">
                   <div class="label">Home
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="PageUp">
                   <div class="label">PgUp
                   </div>
@@ -1142,10 +1227,12 @@
                   <div class="label">Del
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="End">
                   <div class="label">End
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="PageDown">
                   <div class="label">PgDn
                   </div>
@@ -1153,22 +1240,30 @@
           </div>
           <div class="keypad-row"></div>
           <div class="keypad-row">
-                <div class="empty-key"></div>
+                <div class="empty ">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="ArrowUp">
                   <div class="label">&uarr;
                   </div>
                 </div>
-                <div class="empty-key"></div>
+                <div class="spacer-fixed"></div>
+                <div class="empty ">
+                  <div class="label">&nbsp;</div>
+                </div>
           </div>
           <div class="keypad-row">
                 <div class="key " data-code="ArrowLeft">
                   <div class="label">&larr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="ArrowDown">
                   <div class="label">&darr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="ArrowRight">
                   <div class="label">&rarr;
                   </div>
@@ -1177,15 +1272,20 @@
         </div>
         <div class="keypad-block">
           <div class="keypad-row">
-                <div class="empty-key"></div>
+                <div class="empty small">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="IntlYen">
                   <div class="label">Yen
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="IntlBackslash">
                   <div class="label">N/US
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Power">
                   <div class="label">PWR
                   </div>
@@ -1197,14 +1297,17 @@
                   <div class="label"><img class="inline-lamp hid-keyboard-num-led led-gray" src="/share/svg/led-square.svg"><br> NmLk
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="NumpadDivide">
                   <div class="label">/
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="NumpadMultiply">
                   <div class="label">*
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="NumpadSubtract">
                   <div class="label">-
                   </div>
@@ -1215,29 +1318,37 @@
                   <div class="label">7<br>Home
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad8">
                   <div class="label">8<br>&uarr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad9">
                   <div class="label">9<br>PgUp
                   </div>
                 </div>
-                <div class="empty-key"></div>
+                <div class="spacer-fixed"></div>
+                <div class="empty ">
+                  <div class="label">&nbsp;</div>
+                </div>
           </div>
           <div class="keypad-row">
                 <div class="key small" data-code="Numpad4">
                   <div class="label">4<br>&larr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad5">
                   <div class="label">5<br><br>
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad6">
                   <div class="label">6<br>&rarr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="NumpadAdd">
                   <div class="label">+
                   </div>
@@ -1248,26 +1359,36 @@
                   <div class="label">1<br>End
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad2">
                   <div class="label">2<br>&darr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="Numpad3">
                   <div class="label">3<br>PgDn
                   </div>
                 </div>
-                <div class="empty-key"></div>
+                <div class="spacer-fixed"></div>
+                <div class="empty ">
+                  <div class="label">&nbsp;</div>
+                </div>
           </div>
           <div class="keypad-row">
                 <div class="key small" data-code="Numpad0">
                   <div class="label">0<br>Ins
                   </div>
                 </div>
-                <div class="empty-key"></div>
+                <div class="spacer-fixed"></div>
+                <div class="empty ">
+                  <div class="label">&nbsp;</div>
+                </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="NumpadDecimal">
                   <div class="label">.<br>Del
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="NumpadEnter">
                   <div class="label">Ent
                   </div>
@@ -1278,85 +1399,93 @@
       <div class="keypad" id="keyboard-mobile" align="center">
         <div class="keypad-block">
           <div class="keypad-row">
-                <div class="key margin-0 small" data-code="Escape">
+                <div class="key small" data-code="Escape">
                   <div class="label">Esc
                   </div>
                 </div>
-                <div class="empty-key" style="width:1px"></div>
-                <div class="key wide-0 margin-0 small" data-code="F1">
+                <div class="spacer"></div>
+                <div class="key wide-0 small rounded-left" data-code="F1">
                   <div class="label">F1
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F2">
+                <div class="key wide-0 small rounded-none" data-code="F2">
                   <div class="label">F2
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F3">
+                <div class="key wide-0 small rounded-none" data-code="F3">
                   <div class="label">F3
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F4">
+                <div class="key wide-0 small rounded-right" data-code="F4">
                   <div class="label">F4
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F5">
+                <div class="spacer-fixed"></div>
+                <div class="key wide-0 small rounded-left" data-code="F5">
                   <div class="label">F5
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F6">
+                <div class="key wide-0 small rounded-none" data-code="F6">
                   <div class="label">F6
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F7">
+                <div class="key wide-0 small rounded-none" data-code="F7">
                   <div class="label">F7
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F8">
+                <div class="key wide-0 small rounded-right" data-code="F8">
                   <div class="label">F8
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F9">
+                <div class="spacer-fixed"></div>
+                <div class="key wide-0 small rounded-left" data-code="F9">
                   <div class="label">F9
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F10">
+                <div class="key wide-0 small rounded-none" data-code="F10">
                   <div class="label">F10
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F11">
+                <div class="key wide-0 small rounded-none" data-code="F11">
                   <div class="label">F11
                   </div>
                 </div>
-                <div class="key wide-0 margin-0 small" data-code="F12">
+                <div class="key wide-0 small rounded-right" data-code="F12">
                   <div class="label">F12
                   </div>
                 </div>
-                <div class="empty-key" style="width:2px"></div>
-                <div class="modifier margin-0 small" data-code="PrintScreen">
+                <div class="spacer-fixed"></div>
+                <div class="modifier small" data-code="PrintScreen">
                   <div class="label"><b>&bull;</b><br>Pt/Sq
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="ScrollLock">
+                <div class="spacer"></div>
+                <div class="key small" data-code="ScrollLock">
                   <div class="label"><img class="inline-lamp hid-keyboard-scroll-led led-gray" src="/share/svg/led-square.svg"><br> ScrLk
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="Pause">
+                <div class="spacer"></div>
+                <div class="key small" data-code="Pause">
                   <div class="label">P/Brk
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="Insert">
+                <div class="spacer"></div>
+                <div class="key small" data-code="Insert">
                   <div class="label">Ins
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="Home">
+                <div class="spacer"></div>
+                <div class="key small" data-code="Home">
                   <div class="label">Home
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="End">
+                <div class="spacer"></div>
+                <div class="key small" data-code="End">
                   <div class="label">End
                   </div>
                 </div>
-                <div class="key margin-0 small" data-code="Delete">
+                <div class="spacer"></div>
+                <div class="key small" data-code="Delete">
                   <div class="label">Del
                   </div>
                 </div>
@@ -1366,224 +1495,275 @@
                   <div class="label">~<br>`
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit1">
                   <div class="label">!<br>1
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit2">
                   <div class="label">@<br>2
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit3">
                   <div class="label">#<br>3
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit4">
                   <div class="label">$<br>4
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit5">
                   <div class="label">%<br>5
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit6">
                   <div class="label">^<br>6
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit7">
                   <div class="label">&amp;<br>7
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit8">
                   <div class="label">*<br>8
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit9">
                   <div class="label">(<br>9
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Digit0">
                   <div class="label">)<br>0
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Minus">
                   <div class="label">_<br>-
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Equal">
                   <div class="label">+<br>=
                   </div>
                 </div>
-                <div class="key wide-3 right" data-code="Backspace" style="width:101px">
+                <div class="spacer"></div>
+                <div class="key wide-2 right" data-code="Backspace" style="width:101px">
                   <div class="label">&#8612;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="key wide-2 left" data-code="Tab">
+                <div class="key wide-1 left" data-code="Tab">
                   <div class="label">&#8676;<br>&#8677;
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyQ">
                   <div class="label">Q
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyW">
                   <div class="label">W
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyE">
                   <div class="label">E
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyR">
                   <div class="label">R
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyT">
                   <div class="label">T
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyY">
                   <div class="label">Y
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyU">
                   <div class="label">U
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyI">
                   <div class="label">I
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyO">
                   <div class="label">O
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyP">
                   <div class="label">P
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="BracketLeft">
                   <div class="label">{<br>[
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="BracketRight">
                   <div class="label">}<br>]
                   </div>
                 </div>
-                <div class="key wide-2 left" data-code="Backslash" style="width:78px">
+                <div class="spacer"></div>
+                <div class="key wide-1 left" data-code="Backslash" style="width:78px">
                   <div class="label">|<br>&bsol;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="key wide-3 left small" data-code="CapsLock">
+                <div class="key wide-2 left small" data-code="CapsLock">
                   <div class="label"><img class="inline-lamp hid-keyboard-caps-led led-gray" src="/share/svg/led-square.svg"><br> Caps Lock
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyA">
                   <div class="label">A
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyS">
                   <div class="label">S
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyD">
                   <div class="label">D
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyF">
                   <div class="label">F
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyG">
                   <div class="label">G
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyH">
                   <div class="label">H
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyJ">
                   <div class="label">J
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyK">
                   <div class="label">K
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyL">
                   <div class="label">L
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Semicolon">
                   <div class="label">:<br>;
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Quote">
                   <div class="label">`<br>'
                   </div>
                 </div>
-                <div class="key wide-4 right small" data-code="Enter" style="width:116px">
+                <div class="spacer"></div>
+                <div class="key wide-3 right small" data-code="Enter" style="width:116px">
                   <div class="label">Enter<br>&crarr;
                   </div>
                 </div>
           </div>
           <div class="keypad-row">
-                <div class="modifier wide-4 left small" data-code="ShiftLeft">
+                <div class="modifier wide-3 left small" data-code="ShiftLeft">
                   <div class="label"><b>&bull;</b><br>Shift
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyZ">
                   <div class="label">Z
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyX">
                   <div class="label">X
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyC">
                   <div class="label">C
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyV">
                   <div class="label">V
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyB">
                   <div class="label">B
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyN">
                   <div class="label">N
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key single" data-code="KeyM">
                   <div class="label">M
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Comma">
-                  <div class="label">lt;<br>,
+                  <div class="label">&lt;<br>,
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Period">
                   <div class="label">&gt;<br>.
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Slash">
                   <div class="label">?<br>/
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key small" data-code="PageUp">
                   <div class="label">PgUp
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="ArrowUp">
                   <div class="label">&uarr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key small" data-code="PageDown">
                   <div class="label">PgDn
                   </div>
@@ -1594,42 +1774,52 @@
                   <div class="label"><b>&bull;</b><br>Ctrl
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier wide-1 left small" data-code="MetaLeft">
                   <div class="label"><b>&bull;</b><br>Win
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier wide-1 left small" data-code="AltLeft">
                   <div class="label"><b>&bull;</b><br>Alt
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="Space" style="width:190px">
                   <div class="label">
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier right small" data-code="AltRight">
                   <div class="label"><b>&bull;</b><br>Alt
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier right small" data-code="MetaRight">
                   <div class="label"><b>&bull;</b><br>Win
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier right small" data-code="ShiftRight">
                   <div class="label"><b>&bull;</b><br>Shift
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="modifier right small" data-code="ControlRight">
                   <div class="label"><b>&bull;</b><br>Ctrl
                   </div>
                 </div>
+                <div class="spacer"></div>
                 <div class="key " data-code="ArrowLeft">
                   <div class="label">&larr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="ArrowDown">
                   <div class="label">&darr;
                   </div>
                 </div>
+                <div class="spacer-fixed"></div>
                 <div class="key " data-code="ArrowRight">
                   <div class="label">&rarr;
                   </div>
diff --git a/web/kvm/window-keyboard.pug b/web/kvm/window-keyboard.pug
index 7346e88c..2a1191f0 100644
--- a/web/kvm/window-keyboard.pug
+++ b/web/kvm/window-keyboard.pug
@@ -1,16 +1,29 @@
-mixin key(code, classes="", width=0)
+mixin key(spacer, code, classes="", width=0)
 	div(data-code=code, class=`key ${classes}`, style=(width ? `width:${width}px` : ""))
 		div(class="label")
 			block
+	if spacer == 1
+		div(class="spacer")
+	else if spacer == 2
+		div(class="spacer-fixed")
 
-mixin modifier(code, classes="", width=0)
+mixin modifier(spacer, code, classes="", width=0)
 	div(data-code=code class=`modifier ${classes}` style=(width ? `width:${width}px` : ""))
 		div(class="label")
 			| #[b &bull;]#[br]
 			block
+	if spacer == 1
+		div(class="spacer")
+	else if spacer == 2
+		div(class="spacer-fixed")
 
-mixin empty_key(width=0)
-	div(class="empty-key" style=(width ? `width:${width}px` : ""))
+mixin empty(spacer, classes="", width=0)
+	div(class=`empty ${classes}` style=(width ? `width:${width}px` : ""))
+		div(class="label") &nbsp;
+	if spacer == 1
+		div(class="spacer")
+	else if spacer == 2
+		div(class="spacer-fixed")
 
 mixin lamp(cls)
 	img(class=`inline-lamp ${cls} led-gray` src=`${svg_dir}/led-square.svg`)
@@ -23,173 +36,181 @@ div(id="keyboard-window" class="window")
 	div(id="keyboard-desktop" class="keypad" align="center")
 		div(class="keypad-block")
 			div(class="keypad-row")
-				+key("Escape", "small") Esc
-				+empty_key(24)
+				+key(2, "Escape", "small") Esc
+				+empty(1, "", 24)
 				each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
-					+key(key, "small") #{key}
+					+key((key != "F12" ? 1 : 0), key, "small") #{key}
 					if key == "F4" || key == "F8"
-						+empty_key(10)
+						+empty(1, "", 10)
 			hr
 			div(class="keypad-row")
-				+key("Backquote") ~#[br]`
+				+key(1, "Backquote") ~#[br]`
 				each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
-					+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
-				+key("Digit0") )#[br]0
-				+key("Minus") _#[br]-
-				+key("Equal") +#[br]=
-				+key("Backspace", "wide-2 right") &#8612;
+					+key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+				+key(1, "Digit0") )#[br]0
+				+key(1, "Minus") _#[br]-
+				+key(2, "Equal") +#[br]=
+				+key(0, "Backspace", "wide-1 right") &#8612;
 			div(class="keypad-row")
-				+key("Tab", "wide-2 left") &#8676;#[br]&#8677;
+				+key(2, "Tab", "wide-1 left") &#8676;#[br]&#8677;
 				each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
-					+key(`Key${key}`, "single") #{key}
-				+key("BracketLeft") {#[br][
-				+key("BracketRight") }#[br]]
-				+key("Backslash") |#[br]&bsol;
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "BracketLeft") {#[br][
+				+key(1, "BracketRight") }#[br]]
+				+key(0, "Backslash") |#[br]&bsol;
 			div(class="keypad-row")
-				+key("CapsLock", "wide-3 left small")
+				+key(2, "CapsLock", "wide-2 left small")
 					+lamp("hid-keyboard-caps-led")
 					| #[br] Caps Lock
 				each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
-					+key(`Key${key}`, "single") #{key}
-				+key("Semicolon") :#[br];
-				+key("Quote") "#[br]'
-				+key("Enter", "wide-3 right small") Enter#[br]&crarr;
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "Semicolon") :#[br];
+				+key(2, "Quote") "#[br]'
+				+key(0, "Enter", "wide-2 right small") Enter#[br]&crarr;
 			div(class="keypad-row")
-				+modifier("ShiftLeft", "wide-4 left small") Shift
+				+modifier(2, "ShiftLeft", "wide-3 left small") Shift
 				each key in ["Z", "X", "C", "V", "B", "N", "M"]
-					+key(`Key${key}`, "single") #{key}
-				+key("Comma") &lt;#[br],
-				+key("Period") &gt;#[br].
-				+key("Slash") ?#[br]/
-				+modifier("ShiftRight", "wide-4 right small") Shift
-			div(class="keypad-row")
-				+modifier("ControlLeft", "wide-1 left small") Ctrl
-				+modifier("MetaLeft", "wide-1 left small") Win
-				+modifier("AltLeft", "wide-1 left small") Alt
-				+key("Space", "wide-5")
-				+modifier("AltRight", "wide-1 right small") Alt
-				+modifier("MetaRight", "wide-1 right small") Win
-				+modifier("ControlRight", "wide-1 right small") Ctrl
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "Comma") &lt;#[br],
+				+key(1, "Period") &gt;#[br].
+				+key(2, "Slash") ?#[br]/
+				+modifier(0, "ShiftRight", "wide-3 right small") Shift
+			div(class="keypad-row")
+				+modifier(2, "ControlLeft", "wide-1 left small") Ctrl
+				+modifier(2, "MetaLeft", "wide-1 left small") Win
+				+modifier(2, "AltLeft", "wide-1 left small") Alt
+				+key(2, "Space", "wide-4")
+				+modifier(2, "AltRight", "wide-1 right small") Alt
+				+modifier(2, "MetaRight", "wide-1 right small") Win
+				+modifier(0, "ControlRight", "wide-1 right small") Ctrl
 		div(class="keypad-block")
 			div(class="keypad-row")
-				+modifier("PrintScreen", "small") Pt/Sq
-				+key("ScrollLock", "small")
+				+modifier(2, "PrintScreen", "small") Pt/Sq
+				+key(2, "ScrollLock", "small")
 					+lamp("hid-keyboard-scroll-led")
 					| #[br] ScrLk
-				+key("Pause", "small") P/Brk
+				+key(0, "Pause", "small") P/Brk
 			hr
 			div(class="keypad-row")
-				+key("Insert", "small") Ins
-				+key("Home", "small") Home
-				+key("PageUp", "small") PgUp
+				+key(2, "Insert", "small") Ins
+				+key(2, "Home", "small") Home
+				+key(0, "PageUp", "small") PgUp
 			div(class="keypad-row")
-				+key("Delete", "small") Del
-				+key("End", "small") End
-				+key("PageDown", "small") PgDn
+				+key(2, "Delete", "small") Del
+				+key(2, "End", "small") End
+				+key(0, "PageDown", "small") PgDn
 			div(class="keypad-row")
 			div(class="keypad-row")
-				+empty_key()
-				+key("ArrowUp") &uarr;
-				+empty_key()
+				+empty(1, "")
+				+key(2, "ArrowUp") &uarr;
+				+empty(0, "")
 			div(class="keypad-row")
-				+key("ArrowLeft") &larr;
-				+key("ArrowDown") &darr;
-				+key("ArrowRight") &rarr;
+				+key(2, "ArrowLeft") &larr;
+				+key(2, "ArrowDown") &darr;
+				+key(0, "ArrowRight") &rarr;
 		div(class="keypad-block")
 			div(class="keypad-row")
-				+empty_key()
-				+key("IntlYen", "small") Yen
-				+key("IntlBackslash", "small") N/US
-				+key("Power", "small") PWR
+				+empty(2, "small")
+				+key(2, "IntlYen", "small") Yen
+				+key(2, "IntlBackslash", "small") N/US
+				+key(0, "Power", "small") PWR
 			hr
 			div(class="keypad-row")
-				+key("NumLock", "small")
+				+key(2, "NumLock", "small")
 					+lamp("hid-keyboard-num-led")
 					| #[br] NmLk
-				+key("NumpadDivide") /
-				+key("NumpadMultiply") *
-				+key("NumpadSubtract") -
-			div(class="keypad-row")
-				+key("Numpad7", "small") 7#[br]Home
-				+key("Numpad8", "small") 8#[br]&uarr;
-				+key("Numpad9", "small") 9#[br]PgUp
-				+empty_key()
-			div(class="keypad-row")
-				+key("Numpad4", "small") 4#[br]&larr;
-				+key("Numpad5", "small") 5#[br]#[br]
-				+key("Numpad6", "small") 6#[br]&rarr;
-				+key("NumpadAdd") +
-			div(class="keypad-row")
-				+key("Numpad1", "small") 1#[br]End
-				+key("Numpad2", "small") 2#[br]&darr;
-				+key("Numpad3", "small") 3#[br]PgDn
-				+empty_key()
-			div(class="keypad-row")
-				+key("Numpad0", "small") 0#[br]Ins
-				+empty_key()
-				+key("NumpadDecimal", "small") .#[br]Del
-				+key("NumpadEnter", "small") Ent
+				+key(2, "NumpadDivide") /
+				+key(2, "NumpadMultiply") *
+				+key(0, "NumpadSubtract") -
+			div(class="keypad-row")
+				+key(2, "Numpad7", "small") 7#[br]Home
+				+key(2, "Numpad8", "small") 8#[br]&uarr;
+				+key(2, "Numpad9", "small") 9#[br]PgUp
+				+empty(0, "")
+			div(class="keypad-row")
+				+key(2, "Numpad4", "small") 4#[br]&larr;
+				+key(2, "Numpad5", "small") 5#[br]#[br]
+				+key(2, "Numpad6", "small") 6#[br]&rarr;
+				+key(0, "NumpadAdd") +
+			div(class="keypad-row")
+				+key(2, "Numpad1", "small") 1#[br]End
+				+key(2, "Numpad2", "small") 2#[br]&darr;
+				+key(2, "Numpad3", "small") 3#[br]PgDn
+				+empty(0, "")
+			div(class="keypad-row")
+				+key(2, "Numpad0", "small") 0#[br]Ins
+				+empty(2, "")
+				+key(2, "NumpadDecimal", "small") .#[br]Del
+				+key(0, "NumpadEnter", "small") Ent
 
 	div(id="keyboard-mobile" class="keypad" align="center")
 		div(class="keypad-block")
 			div(class="keypad-row")
-				+key("Escape", "margin-0 small") Esc
-				+empty_key(1)
-				each key in ["F1", "F2", "F3", "F4", "F5", "F6", "F7", "F8", "F9", "F10", "F11", "F12"]
-					+key(key, "wide-0 margin-0 small") #{key}
-				+empty_key(2)
-				+modifier("PrintScreen", "margin-0 small") Pt/Sq
-				+key("ScrollLock", "margin-0 small")
+				+key(1, "Escape", "small") Esc
+				+key(0, "F1", "wide-0 small rounded-left") F1
+				+key(0, "F2", "wide-0 small rounded-none") F2
+				+key(0, "F3", "wide-0 small rounded-none") F3
+				+key(2, "F4", "wide-0 small rounded-right") F4
+				+key(0, "F5", "wide-0 small rounded-left") F5
+				+key(0, "F6", "wide-0 small rounded-none") F6
+				+key(0, "F7", "wide-0 small rounded-none") F7
+				+key(2, "F8", "wide-0 small rounded-right") F8
+				+key(0, "F9", "wide-0 small rounded-left") F9
+				+key(0, "F10", "wide-0 small rounded-none") F10
+				+key(0, "F11", "wide-0 small rounded-none") F11
+				+key(2, "F12", "wide-0 small rounded-right") F12
+				+modifier(1, "PrintScreen", "small") Pt/Sq
+				+key(1, "ScrollLock", "small")
 					+lamp("hid-keyboard-scroll-led")
 					| #[br] ScrLk
-				+key("Pause", "margin-0 small") P/Brk
-				+key("Insert", "margin-0 small") Ins
-				+key("Home", "margin-0 small") Home
-				+key("End", "margin-0 small") End
-				+key("Delete", "margin-0 small") Del
+				+key(1, "Pause", "small") P/Brk
+				+key(1, "Insert", "small") Ins
+				+key(1, "Home", "small") Home
+				+key(1, "End", "small") End
+				+key(0, "Delete", "small") Del
 			div(class="keypad-row")
-				+key("Backquote") ~#[br]`
+				+key(1, "Backquote") ~#[br]`
 				each key, index in ["!", "@", "#", "$", "%", "^", "&", "*", "("]
-					+key(`Digit${index + 1}`) #{key}#[br]#{index + 1}
-				+key("Digit0") )#[br]0
-				+key("Minus") _#[br]-
-				+key("Equal") +#[br]=
-				+key("Backspace", "wide-3 right", 101) &#8612;
+					+key(1, `Digit${index + 1}`) #{key}#[br]#{index + 1}
+				+key(1, "Digit0") )#[br]0
+				+key(1, "Minus") _#[br]-
+				+key(1, "Equal") +#[br]=
+				+key(0, "Backspace", "wide-2 right", 101) &#8612;
 			div(class="keypad-row")
-				+key("Tab", "wide-2 left") &#8676;<br>&#8677;
+				+key(1, "Tab", "wide-1 left") &#8676;<br>&#8677;
 				each key in ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
-					+key(`Key${key}`, "single") #{key}
-				+key("BracketLeft") {#[br][
-				+key("BracketRight") }#[br]]
-				+key("Backslash", "wide-2 left", 78) |#[br]&bsol;
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "BracketLeft") {#[br][
+				+key(1, "BracketRight") }#[br]]
+				+key(0, "Backslash", "wide-1 left", 78) |#[br]&bsol;
 			div(class="keypad-row")
-				+key("CapsLock", "wide-3 left small")
+				+key(1, "CapsLock", "wide-2 left small")
 					+lamp("hid-keyboard-caps-led")
 					| #[br] Caps Lock
 				each key in ["A", "S", "D", "F", "G", "H", "J", "K", "L"]
-					+key(`Key${key}`, "single") #{key}
-				+key("Semicolon") :#[br];
-				+key("Quote") `#[br]'
-				+key("Enter", "wide-4 right small", 116) Enter#[br]&crarr;
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "Semicolon") :#[br];
+				+key(1, "Quote") `#[br]'
+				+key(0, "Enter", "wide-3 right small", 116) Enter#[br]&crarr;
 			div(class="keypad-row")
-				+modifier("ShiftLeft", "wide-4 left small") Shift
+				+modifier(1, "ShiftLeft", "wide-3 left small") Shift
 				each key in ["Z", "X", "C", "V", "B", "N", "M"]
-					+key(`Key${key}`, "single") #{key}
-				+key("Comma") lt;#[br],
-				+key("Period") &gt;#[br].
-				+key("Slash") ?#[br]/
-				+key("PageUp", "small") PgUp
-				+key("ArrowUp") &uarr;
-				+key("PageDown", "small") PgDn
-			div(class="keypad-row")
-				+modifier("ControlLeft", "wide-1 left small") Ctrl
-				+modifier("MetaLeft", "wide-1 left small") Win
-				+modifier("AltLeft", "wide-1 left small") Alt
-				+key("Space", "", 190)
-				+modifier("AltRight", "right small") Alt
-				+modifier("MetaRight", "right small") Win
-				+modifier("ShiftRight", "right small") Shift
-				+modifier("ControlRight", "right small") Ctrl
-				+key("ArrowLeft") &larr;
-				+key("ArrowDown") &darr;
-				+key("ArrowRight") &rarr;
+					+key(1, `Key${key}`, "single") #{key}
+				+key(1, "Comma") &lt;#[br],
+				+key(1, "Period") &gt;#[br].
+				+key(1, "Slash") ?#[br]/
+				+key(2, "PageUp", "small") PgUp
+				+key(2, "ArrowUp") &uarr;
+				+key(0, "PageDown", "small") PgDn
+			div(class="keypad-row")
+				+modifier(1, "ControlLeft", "wide-1 left small") Ctrl
+				+modifier(1, "MetaLeft", "wide-1 left small") Win
+				+modifier(1, "AltLeft", "wide-1 left small") Alt
+				+key(1, "Space", "", 190)
+				+modifier(1, "AltRight", "right small") Alt
+				+modifier(1, "MetaRight", "right small") Win
+				+modifier(1, "ShiftRight", "right small") Shift
+				+modifier(1, "ControlRight", "right small") Ctrl
+				+key(2, "ArrowLeft") &larr;
+				+key(2, "ArrowDown") &darr;
+				+key(0, "ArrowRight") &rarr;
diff --git a/web/kvm/window-stream.pug b/web/kvm/window-stream.pug
index ad88d8af..afafd765 100644
--- a/web/kvm/window-stream.pug
+++ b/web/kvm/window-stream.pug
@@ -21,17 +21,17 @@ div(id="stream-window" class="window window-resizable")
 	div(id="stream-mouse-buttons" class="keypad" align="center")
 		div(class="keypad-block")
 			div(class="keypad-row")
-				div(data-code="left" class="key wide-4 left small") #[span Mouse#[br]Left]
-				div(data-code="left" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
-				div(class="empty-key" style="width:10px")
-				div(data-code="middle" class="key wide-2 left small") #[span Mouse#[br]Middle]
-				div(data-code="middle" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
-				div(class="empty-key" style="width:10px")
-				div(data-code="right" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
-				div(data-code="right" class="key wide-4 right small") #[span Mouse#[br]Right]
-			div(class="keypad-row" style="display:none")
-				div(data-code="up" class="key wide-4 left small") #[span Mouse#[br]Up/Back]
-				div(data-code="up" class="modifier wide-2 left small") #[span #[b &bull;]#[br]&larr; Hold]
-				div(class="empty-key" style="width:10px")
-				div(data-code="down" class="modifier wide-2 right small") #[span #[b &bull;]#[br]Hold &rarr;]
-				div(data-code="down" class="key wide-4 right small") #[span Mouse#[br]Down/Fw]
+				div(data-code="left" class="key wide-3 left rounded-left")
+					div(class="label") Left
+				div(data-code="left" class="modifier left small rounded-right")
+					div(class="label") #[b &bull;]#[br]Hold
+				div(class="empty" style="width:15px")
+				div(data-code="middle" class="key wide-1 left rounded-left")
+					div(class="label") Mid
+				div(data-code="middle" class="modifier left small rounded-right")
+					div(class="label") #[b &bull;]#[br]Hold
+				div(class="empty" style="width:15px")
+				div(data-code="right" class="modifier right small rounded-left")
+					div(class="label") #[b &bull;]#[br]Hold
+				div(data-code="right" class="key wide-3 right rounded-right")
+					div(class="label") Right
diff --git a/web/share/css/keypad.css b/web/share/css/keypad.css
index 52a4afaf..61d56ada 100644
--- a/web/share/css/keypad.css
+++ b/web/share/css/keypad.css
@@ -33,6 +33,8 @@ div.keypad div.keypad-block:not(:first-child) {
 }
 
 div.keypad div.keypad-row {
+	display: flex;
+	flex-wrap: wrap;
 	white-space: nowrap;
 	height: 40px;
 	margin-bottom: 5px;
@@ -41,12 +43,18 @@ div.keypad div.keypad-row:last-child {
 	margin-bottom: 0;
 }
 
+div.keypad div.keypad-row div.spacer {
+	margin: 2px;
+	flex-grow: 1;
+}
+div.keypad div.keypad-row div.spacer-fixed {
+	margin: 3px;
+}
+
 div.keypad div.key,
 div.keypad div.modifier,
-div.keypad div.empty-key {
+div.keypad div.empty {
 	box-sizing: border-box;
-	display: inline-block;
-	margin-right: 5px;
 	padding: 0;
 	width: 40px;
 }
@@ -68,6 +76,15 @@ div.keypad div.modifier:hover {
 	color: var(--cs-key-hovered-fg);
 	background-color: var(--cs-key-hovered-bg);
 }
+div.keypad div.rounded-left {
+	border-radius: 6px 0px 0px 6px !important;
+}
+div.keypad div.rounded-right {
+	border-radius: 0px 6px 6px 0px !important;
+}
+div.keypad div.rounded-none {
+	border-radius: 0px !important;
+}
 div.keypad div.pressed {
 	box-shadow: none;
 	color: var(--cs-key-pressed-fg) !important;
@@ -79,29 +96,24 @@ div.keypad div.holded {
 	background-color: var(--cs-key-holded-bg) !important;
 }
 div.keypad div.key:last-child,
-div.keypad div.empty-key:last-child,
+div.keypad div.empty:last-child,
 div.keypad div.modifier:last-child {
 	margin-right: 0;
 }
-div.keypad div.margin-0 {
-	margin-right: 0px;
-}
 div.keypad div.wide-0 {
-	width: 26px;
+	width: 28px;
 }
 div.keypad div.wide-1 {
 	width: 61px;
 }
 div.keypad div.wide-2 {
-	width: 64px;
-}
-div.keypad div.wide-3 {
 	width: 77px;
 }
-div.keypad div.wide-4 {
+div.keypad div.wide-3 {
 	width: 102px;
 }
-div.keypad div.wide-5 {
+div.keypad div.wide-4 {
+	flex-grow: 1;
 	width: 288px;
 }
 div.keypad div.left {