From 64ba6d89c2adbc8fbb5a94425641565a7eb373f8 Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Fri, 3 Jul 2026 23:49:13 +0300 Subject: ychat: make the chat UI mobile-friendly (task is0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit frameset.html used a classic HTML (cols=*,150 / rows=*,0) to split the screen into message stream, userlist, and input areas. Framesets can't reflow via CSS media queries (cols/rows are fixed HTML attributes, not CSS) and are deprecated/unreliable in modern mobile browsers, making this the main mobile blocker. Replaced it with named iframes inside a flexbox layout (style.css: body.chatlayout and friends) — named iframes still expose the same window. access the existing JS relies on (parent.stream.autoscroll()/stopscroll()), so no JS changes were needed. A media query restacks the userlist below the stream and grows the input row's height on narrow viewports instead of it eating ~40% of a phone's width as a fixed side column. Other mobile fixes: - Added to every template (was missing everywhere). - style.css: capped .text input width (size=60/40 attributes overflowed a ~375px screen; CSS width wins over the size attribute so one rule fixes every such field), set 16px input font-size to stop iOS Safari's auto-zoom-on-focus, gave submit/button inputs larger tap targets, and let wide tables (color picker, admin/help content) scroll horizontally instead of blowing out the page width. - input.html: replaced the two position:absolute control rows (fixed pixel offsets, no reflow) with wrapping flexbox rows (.input-row/.input-links) so the message box and action links stack on narrow screens. Verified by building the Dockerfile image, running it, registering/logging in a test user via curl, and confirming the *served* (token-substituted) HTML for index.html, register.html, frameset.html, and the stream/online/ input frames it references all contain the viewport meta tag and new CSS classes, with %%tmpid%% correctly substituted in iframe src URLs. Co-Authored-By: Claude Sonnet 5 --- ychat/html/admin.html | 1 + ychat/html/colors.html | 1 + ychat/html/demo.html | 1 + ychat/html/frameset.html | 27 ++++++------ ychat/html/help.html | 1 + ychat/html/index.html | 1 + ychat/html/input.html | 8 +++- ychat/html/loggedin.html | 1 + ychat/html/notfound.html | 1 + ychat/html/online.html | 1 + ychat/html/options.html | 1 + ychat/html/register.html | 1 + ychat/html/stream.html | 1 + ychat/html/style.css | 111 +++++++++++++++++++++++++++++++++++++++++++++++ 14 files changed, 142 insertions(+), 15 deletions(-) diff --git a/ychat/html/admin.html b/ychat/html/admin.html index 79152d8..7cfa487 100644 --- a/ychat/html/admin.html +++ b/ychat/html/admin.html @@ -2,6 +2,7 @@ + Admin options - %%ychat.version%% diff --git a/ychat/html/colors.html b/ychat/html/colors.html index cb3a9e2..8b142f9 100644 --- a/ychat/html/colors.html +++ b/ychat/html/colors.html @@ -2,6 +2,7 @@ + Color menu - %%ychat.version%%