Fix settings panel layout on small screens

Both labels and inputs protruded outside the panel on for example a
phone in portrait mode. This commit fixes that by allowing wrapping and
setting a max-width.

Since the --input-xpadding variable is now used in two different CSS
files, it was moved to constants.css.

app/styles/base.css

@@ -464,16 +464,24 @@ html {
     white-space: nowrap;
     margin: 5px;
 }
+@media (max-width: 540px) {
+    /* Allow wrapping on small screens */
+    .noVNC_panel label {
+        white-space: unset;
+    }
+}
 
 .noVNC_panel li {
     margin: 5px;
 }
 
-.noVNC_panel label > button,
-.noVNC_panel label > select,
-.noVNC_panel label > textarea,
-.noVNC_panel label > input:not([type=checkbox]):not([type=radio]) {
+.noVNC_panel button,
+.noVNC_panel select,
+.noVNC_panel textarea,
+.noVNC_panel input:not([type=checkbox]):not([type=radio]) {
     margin-left: 6px;
+    /* Prevent inputs in panels from being too wide */
+    max-width: calc(100% - 6px - var(--input-xpadding) * 2);
 }
 
 .noVNC_panel .noVNC_heading {

app/styles/constants.css

@@ -22,3 +22,9 @@
     --novnc-green: rgb(0, 128, 0);
     --novnc-yellow: rgb(255, 255, 0);
 }
+
+/* ------ MISC PROPERTIES ------ */
+
+:root {
+    --input-xpadding: 1em;
+}

app/styles/input.css

@@ -7,10 +7,6 @@
 
 /* ------- SHARED BETWEEN INPUT ELEMENTS -------- */
 
-:root {
-    --input-xpadding: 1em;
-}
-
 input,
 textarea,
 button,