fix(web): make the panel usable on a phone

[nechodom]

What

A phone-width (375px) pass over the whole web panel. It is CSS plus small template class additions, with no handler changes. Main changes:

• Navigation: at ≤880px the top bar holds the brand, the account controls and a ☰ menu button. The full grouped nav (with labels and icons) opens beneath it. This is CSS-only, using a checkbox and :checked ~ .sidebar-nav, with no JS. The old bar scrolled sideways and showed about two links at 375px.
• Layout: .app uses grid-template-rows: auto 1fr on mobile. Before, short pages showed a ~170px empty band above the bar.
• Inline-styled filter bars and forms: a new .m-stack utility folds multi-column grids into one column and a new .m-wrap lets flex rows wrap. Applied on jobs, users, firewall, nodes, files, stats, services, audit, job detail, hosting detail and profile.
• Tables:
  • /hostings row actions stack inside their cell and long domains break, so the table fits 375px.
  • The coarse-pointer tap-target rule no longer gives .btn a negative margin. It had shoved stacked row-action buttons out of line in every table on touch devices.
  • The .table-wrap bleed matches the ≤480px card padding. It was -1rem against 0.85rem, so every table overshot its card.
  • The profile sessions table and the traffic card table use .flush/.flush-b instead of a hard-coded -1.5rem.
• Page headers: children may shrink and their buttons may wrap. "Back to " ran off screen on /hostings/transfer and job detail.
• Breadcrumbs: they wrap, and keep clear of a sticky page-header that painted over their second line.
• Inline code: uses overflow-wrap: break-word, so long paths and JSON wrap. anywhere was tried first and dropped: it shrinks min-content and squeezed /jobs table cells on desktop.
• File inputs: capped at 100% width.
• Dev only: tests/devserver.rs honours $PORT, so it can run alongside another session.

Why

On a phone most of the panel was reachable only by a sideways swipe on the top bar. Several pages also pushed controls past the right edge or clipped them inside cards.

Operator-facing change?

• No operator-facing change.
• Operator-facing change — described below:
  • At phone/tablet widths (≤880px), navigation moves behind a ☰ menu button in the top bar. Desktop is unchanged.
  • Forms, filters and tables across the panel fit a 375px screen.

Test plan

• cargo test -p hyperion-web passes.
• cargo test --workspace (not run, since only hyperion-web changed).
• cargo clippy --workspace --all-targets (not run).
• cargo fmt -p hyperion-web -- --check passes.
• Manually tested on a real Debian node.
• Checked against the devserver stub at 375×812 with a script that finds anything past the viewport or clipped by an overflow:hidden ancestor. It covered every page, all 11 hosting-detail tabs and all 10 Settings tabs (with <details> opened), files, Move/Copy, job detail, import and login. The confirm modal and the notification dropdown were checked by eye.
• Desktop spot-checked at 1280px: sidebar, /hostings, /jobs, Move/Copy.

Not verified: profile/role edit pages and the Cmd+K palette. The stub has no profiles or roles to edit, and the palette is keyboard-only. Lists were mostly empty in the stub; one hosting with a long domain was created to exercise detail, files and the tables.

Anti-scope

• No visual restyle; colours, type and components are unchanged.
• Tables still scroll sideways where they genuinely have many columns. There is no card-ified mobile table layout.

🤖 Generated with Claude Code