diff options
| author | Paul Buetow <paul@buetow.org> | 2026-07-04 00:00:05 +0300 |
|---|---|---|
| committer | Paul Buetow <paul@buetow.org> | 2026-07-04 00:00:05 +0300 |
| commit | 256e4b2bdd5a7233e21c8be90786f2337039ab46 (patch) | |
| tree | b93cd8e94b52d212766230aa3058941799d8159c | |
| parent | 64ba6d89c2adbc8fbb5a94425641565a7eb373f8 (diff) | |
ychat: fix message input shrink and add spacing above Register link
The message text box in the input frame kept its size="60" intrinsic
width instead of shrinking to fit next to the Send/Select buttons on a
narrow screen: flex items default to min-width:auto, which for an
<input> resolves to its size attribute, not its CSS width, so
max-width:100% alone had no effect. Fixed with min-width:0 + flex:1 1
auto on .input-row .text. Also tightened the input frame's body padding
(it's a short fixed-height strip) and added overflow-y:auto as a
fallback so controls scroll into view instead of clipping if they still
don't fit.
Also added margin-top above the "Register a new nick..." line on the
login page, which had no separation from the login form above it.
| -rw-r--r-- | ychat/html/index.html | 4 | ||||
| -rw-r--r-- | ychat/html/input.html | 2 | ||||
| -rw-r--r-- | ychat/html/style.css | 24 |
3 files changed, 27 insertions, 3 deletions
diff --git a/ychat/html/index.html b/ychat/html/index.html index 0a15e76..7b0c3e3 100644 --- a/ychat/html/index.html +++ b/ychat/html/index.html @@ -29,8 +29,8 @@ <input type="hidden" name="end" value="end" /> <input type="submit" value="login" accesskey="s" /> </form> - <div> - <a class="fancy" href="register.html">Register</a> a new nick If you don't want to register you may login without a password using an unregistered nick. + <div class="register-hint"> + <a class="fancy" href="register.html">Register</a> a new nick If you don't want to register you may login without a password using an unregistered nick. </div> <div class="footer"> <span class="signature">yChat is OpenSource - get it at <a class="fancy" target="_blank" href="https://codeberg.org/snonux/ychat">https://codeberg.org/snonux/ychat</a></span> diff --git a/ychat/html/input.html b/ychat/html/input.html index 26ba8f6..7ef48b6 100644 --- a/ychat/html/input.html +++ b/ychat/html/input.html @@ -35,7 +35,7 @@ //--> </script> </head> - <body> + <body class="inputframe"> <form method="GET" name="input" action="input.html" target="blank" onsubmit="return delout();"> <!-- Was two position:absolute rows with fixed pixel offsets, which does not reflow; a wrapping flex row (see .input-row/.input-links in diff --git a/ychat/html/style.css b/ychat/html/style.css index cac1c8e..94025a9 100644 --- a/ychat/html/style.css +++ b/ychat/html/style.css @@ -13,6 +13,20 @@ body.stream { background-color: #333333; } +.register-hint { + margin-top: 20px; +} + +/* The input frame is a short, fixed-height strip (see .chatlayout-bottom) + holding two wrapped rows of controls; the default 10px body padding eats + into that budget on narrow screens, and overflow-y:auto is a safety net + so controls scroll into view instead of being clipped if they still don't + fit (e.g. very small phones/landscape). */ +body.inputframe { + padding: 4px 6px; + overflow-y: auto; +} + /* Text inputs used fixed "size" (character count) attributes sized for desktop (e.g. size=60 for the chat message box), which overflow a ~375px phone screen. CSS width wins over the size attribute, so capping it here fixes @@ -25,6 +39,16 @@ body.stream { padding: 4px; } +/* Flex items default to min-width:auto, which for an <input> resolves to + its size="..." attribute width, not its rendered CSS width -- so + max-width:100% alone doesn't let the message box shrink to fit next to + the Send/Select buttons on a narrow screen. min-width:0 overrides that, + and flex:1 1 auto makes it (not the buttons) absorb the available space. */ +.input-row .text { + flex: 1 1 auto; + min-width: 0; +} + input[type="submit"], input[type="button"] { font-size: 16px; padding: 8px 14px; |