Web client responsive layout

[jpka]

Parent

Part of #25 (Screen Solver v1: implementation spec), itself under the map #1.

What to build

The phone-optimized layout on top of the working client from the previous ticket: two layouts picked by orientation, swapping live with no reload and no lost state, plus fullscreen.

Orientation is decided directly off innerWidth > innerHeight (not matchMedia/orientationchange, which are demoted to mere change triggers, since a compound media query can silently fail to match), with a 480px floor so very narrow phones still get portrait treatment. Portrait is a continuous log: one feed, the live answer expanded and outlined at top, past answers collapsed to a line each, tapping one expands it in place. Landscape is a split rail: a 132px list rail alongside the answer pane. A rotation mid-session normalizes state across the swap — the rail's explicit live/history pane-mode concept is dropped, whichever entry was open stays open, landing as an expanded card — so the live entry is never shown looking like a history entry after a rotation. A connection-state indicator collapses two signals onto one: live socket state while watching the live stream, replaced wholesale by "viewing history" when reading a past entry, with a transient "syncing…" tag during a sync catch-up. Fullscreen is feature-detected per platform: functional on Android Chrome, rendered visibly disabled (not silently broken) where the Fullscreen API doesn't support arbitrary elements (iPhone Safari).

Acceptance criteria

• At a portrait aspect ratio, the client shows the continuous-log layout; at landscape, the split-rail layout — verified at multiple viewport sizes including the 480px floor case.
• Rotating a real phone mid-answer swaps layout with no reload and no interruption to the live stream.
• After a rotation, the entry that was expanded/live before the rotation is still the one shown expanded/live after — never a live entry rendered with a history-style indicator.
• The connection indicator shows live-socket state while watching the live stream, and switches to a "viewing history" label when a past entry is open instead.
• A sync catch-up window shows a transient "syncing…" tag.
• On Android Chrome, the fullscreen button works. On a browser without arbitrary-element Fullscreen support (e.g. iPhone Safari, or simulated via feature detection), the button renders visibly disabled rather than failing silently on click.

Blocked by

#33 (Web client core).