Standardize + modernize Web UI responsive breakpoints (follow-up to #1279)

[bakerboy448]

Context

Follow-up to #1279 (mobile responsiveness). That PR fixed the concrete
horizontal-overflow bugs (header grid blowout + log-viewer/main-content
min-width), but the Web UI's breakpoint set is inconsistent and predates
current responsive best practice. This issue tracks standardizing and
modernizing it without changing existing behavior.

Current state (inventory)

@media widths currently in web-ui/css/:

• Mixed max-width: 480, 600, 640, 767.98, 768
• Mixed min-width: 576, 641, 768, 991.98, 992, 1400
• Feature queries (keep): hover, pointer: coarse, orientation, max-height,
  prefers-reduced-motion, prefers-color-scheme, prefers-reduced-data,
  prefers-contrast, resolution.

Problems: min/max-width mixed inconsistently; off-by-one magic numbers
(641, 767.98, 991.98); too many distinct breakpoints; overlaps/gaps.

2026 best-practice target

• Canonical set (mobile-first, min-width): 640 / 768 / 1024 / 1280
  (+ 1536 only if a distinct ultrawide treatment is needed). Matches Tailwind;
  Bootstrap 5 uses 576/768/992/1200/1400.
• Design for content, not devices — set a breakpoint where the layout breaks,
  not to match a phone/tablet model.
• Real device widths to cover: phones 320/360/375/390/393/430, tablets
  768/820/1024, laptops 1280/1440/1536, desktop 1920 (4K@200% collapses to 1920).

Modernization opportunities (progressive, non-breaking)

• Container queries (@container) for component-level adaptation (cards,
  widgets in the sidebar) — ~95% browser support.
• clamp() fluid typography/spacing — already partially used (heading
  clamp landed in fix(web-ui): improve mobile responsiveness for small screens #1279); extend to spacing.
• dvh/svh/lvh for full-height drawers/log viewer instead of vh
  (mobile browser-chrome aware); svh is the conservative pick.
• Gate hover-only affordances behind @media (hover: hover) and (pointer: fine).

Constraints

• CSS-only; no desktop regression; incremental (one breakpoint family at a
  time), each step verified.
• Keep the feature queries above as-is.

Verification

Playwright headless overflow sweep — assert document.documentElement.scrollWidth === clientWidth at 320 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1920 with the
config editor, log viewer, and command drawer populated (long torrent paths).
This is the same harness used to verify #1279 and should be wired into CI
(see the browser/webserver CI effort).

Done when

• One documented breakpoint scale in a single place (CSS custom props or a short
  comment block), all media queries migrated to it.
• No off-by-one magic numbers; consistent mobile-first min-width.
• Overflow sweep green at all listed widths; visual spot-check shows no desktop
  change.