diff options
| -rw-r--r-- | ychat/html/input.html | 4 | ||||
| -rw-r--r-- | ychat/html/style.css | 28 |
2 files changed, 27 insertions, 5 deletions
diff --git a/ychat/html/input.html b/ychat/html/input.html index 7ef48b6..f6c8337 100644 --- a/ychat/html/input.html +++ b/ychat/html/input.html @@ -52,8 +52,8 @@ <a href='#' class="fancy" onclick="javascript:popup('loggedin.html?event=loggedin&tmpid=%%tmpid%%', 600, 480)">Users</a> <a href='#' class="fancy" onclick="javascript:popup('admin.html?event=admin&tmpid=%%tmpid%%', 600, 480)">Admin</a> <a href='input.html?event=input&tmpid=%%tmpid%%&message=%2Fq' class="fancy" target='blank'>Logout</a> - Scrolling: - <input type="checkbox" name="scroll" checked onClick="chgscroll(this);" /> + <span class="scroll-label">Scrolling:</span> + <input type="checkbox" name="scroll" checked title="Auto-scroll" onClick="chgscroll(this);" /> </div> <input type="hidden" name="event" value="input" /> <input type="hidden" name="tmpid" value="%%tmpid%%" /> diff --git a/ychat/html/style.css b/ychat/html/style.css index 94025a9..1cbbdb4 100644 --- a/ychat/html/style.css +++ b/ychat/html/style.css @@ -76,6 +76,10 @@ input[type="submit"], input[type="button"] { padding: 4px 6px; } +.input-links a { + white-space: nowrap; +} + h1, h2, h3 { padding: 5px; color: #000000; @@ -171,9 +175,27 @@ body.chatlayout { border-left: 0; border-top: 1px solid #555555; } - /* Input controls wrap onto two lines on narrow screens (see input.html), - so the input frame needs more height than the desktop 70px. */ + /* Input controls take two rows on narrow screens (see input.html): the + message box on its own row, and the link row below it. The link row's + height is now predictable (see .input-links rules below), so this only + needs to fit those two rows, not an unbounded number of wrapped lines. */ .chatlayout-bottom { - flex: 0 0 108px; + flex: 0 0 96px; + } + + /* Six popup links plus a scroll toggle wrap onto several lines at 16px on + a phone-width screen, which is what actually ate the vertical space. + Shrinking the text and letting the row scroll horizontally instead of + wrapping keeps it to one line, and the "Scrolling:" label is dropped in + favor of the checkbox's title tooltip since there's no room for it. */ + .input-links { + flex-wrap: nowrap; + overflow-x: auto; + justify-content: flex-start; + gap: 10px; + font-size: 13px; + } + .scroll-label { + display: none; } } |