Redesign the UI to work on mobile/portrait viewports using CSS media
queries at max-width 768px:
- Host rows stack vertically: info (name, latency, status) on top,
sparkline chart full-width below
- Summary stats line wraps properly with hidden pipe separators
- Header stacks title and controls vertically
- Pause button and controls sized appropriately for touch
- Pin button repositioned for mobile touch targets
- Footer legend wraps cleanly
Desktop layout remains pixel-identical — all changes are scoped to the
@media (max-width: 768px) query in styles.css only.
Refs #2
Detect mobile devices via user agent and viewport width (<=768px).
On mobile, skip all checker initialization and render only the
header, description, and a styled 'Not yet available on mobile' box.
Desktop behavior is completely unchanged — the mobile check returns
early before any existing code runs.
