diff --git a/app/styles/base.css b/app/styles/base.css index 1d61bc46..96315703 100644 --- a/app/styles/base.css +++ b/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 { diff --git a/app/styles/constants.css b/app/styles/constants.css index daf39616..1123a3ef 100644 --- a/app/styles/constants.css +++ b/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; +} diff --git a/app/styles/input.css b/app/styles/input.css index 1be95972..8273d70a 100644 --- a/app/styles/input.css +++ b/app/styles/input.css @@ -7,10 +7,6 @@ /* ------- SHARED BETWEEN INPUT ELEMENTS -------- */ -:root { - --input-xpadding: 1em; -} - input, textarea, button,