ychat: trim down the input frame's link row for mobile

Six popup links (Colors/Options/Help/Users/Admin/Logout) plus a scroll
toggle wrapped onto several lines at the default 16px on a phone-width
screen, which is what was actually eating the input frame's vertical
budget. On narrow screens the row is now a single horizontally
scrollable strip at 13px instead of wrapping, and the "Scrolling:" text
label is dropped in favor of a title tooltip on the checkbox since
there's no room for it. With the row height now predictable (one line,
not an unbounded wrap), .chatlayout-bottom shrinks back from 108px to
96px.

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;
   }
 }