mobile

Shrinking the desktop chat input field and buttons with four responsive Tailwind classes, no separate component and no JavaScript required.

TL;DR: The chunky mobile-sized chat composer was wasting desktop space, but a separate component felt like overkill. Four responsive Tailwind classes fixed it: base sizes stay touch-friendly for phones, sm: variants tighten padding and shrink buttons on desktop. Trade-off is width-based, not pointer-based, so wide touchscreen laptops get small buttons too.

Fullscreen mobile wrapper under a 66px fixed header using mt-66px plus calc 100dvh-66px, uncapped transcript, and a compact messaging header.

My mobile chat needed its own messaging-app-style frame, but the answer logic stays single-sourced by reusing the exported TurnBody.

TL;DR: A desktop three-column chat layout doesn't survive shrinking to phones, so the author built a separate mobile thread component using the familiar messaging-app pattern. Sticky header, chat bubbles, composer, all done with CSS sticky and backdrop-filter. Only the frame is duplicated; shared TurnBody logic keeps desktop and mobile in sync.

A responsive pass on my AI chat panel: 44px send targets per WCAG, 16px input fonts against iOS zoom, and a 65vh transcript with overscroll containment.

TL;DR: A desktop-tidy chat panel broke on mobile in three unrelated ways, each fixed by a standardized number. Buttons grew to 44px per WCAG target-size guidance, and the textarea got a 16px font to stop Safari's forced zoom. A 65vh transcript with overscroll containment stops scroll chaining and pull-to-refresh.

The five latest posts were trapped in a swipe-one-by-one carousel. For navigation content, a plain vertical list is the honest pattern.

TL;DR: The author shipped a carousel for their latest blog posts, then found it tedious to use themselves. The realization: carousels suit fixed showcases like services, but blog lists are navigation, which needs everything scannable at once. They swapped it for a plain vertical list of five titles with dates, no JS or gestures.

Five service cards stacked on a phone became an endless scroll. A script-free carousel with CSS scroll snap turned out to be the honest middle ground.

TL;DR: The author turned five stacked mobile service cards into a pure CSS carousel using scroll snap, no JavaScript needed. Unlike typical carousels, it skips auto-rotation and shows an 80vw peek of the next card, so users know there's more. Desktop keeps the grid layout via a media query.