Fix — Mobile Comment Form UX

bahalaka.com · ~f

What Was Broken

On mobile (≤600px), the comment form stacked vertically with flex-direction: column. The name input expanded to full width, consuming an entire row just for a name field. This made the comment form feel bloated and unusable on phones — too much scrolling, too little value per screen inch.

Root Cause

The mobile responsive rule set .comment-form { flex-direction: column } and .comment-form input[type="text"] { flex: unset }, which removed the 120px constraint and let the name input fill the full container width. Meanwhile, localStorage already remembered the user's name — but the form always showed the full input regardless.

What Was Fixed

Smart Identity Display

When a name is saved in localStorage, the form now shows a compact one-liner: "Posting as Name" with a change link. The name input is hidden until the user explicitly clicks change. First-time users still see the name input.

Restructured Form Layout

Form uses flex-wrap: wrap instead of stacking to column on mobile
Name input capped at max-width: 200px — never full-width
Textarea + Post button grouped in a .cf-body row — always side-by-side
Removed the mobile flex-direction: column override entirely

Test / Verification

Mobile (no saved name): Name input shows, capped at 200px. Textarea + Post below it.
Mobile (saved name): "Posting as Name (change)" — one compact line. Textarea + Post immediately below. No wasted space.
Change flow: Click "change" → name input appears, focused. Edit name, post → name saved, identity label returns.
Desktop: Same behavior, just more room. No regression.

Files Changed

site/index.html

CSS: new .cf-identity, .cf-name-row, .cf-body, .cf-post classes. Removed column-stack mobile override. JS: added changeName() function, restructured renderThread() form output with identity/name-row/body sections.

What's Next

Board 2 — Auth Infrastructure. The comment form is now mobile-ready for the auth layer that will replace localStorage names with real sessions.