feat(frontend): shell web responsive pour viewport téléphone (#69)

Lots 1 et 2 du ticket #69 : rendre le client web (#13) utilisable sur un
téléphone. Le client web n'a jamais eu de docks ni de fenêtres flottantes —
il est déjà une colonne verticale unique — donc le lot 2 se réduit aux
rangées qui débordaient réellement à 360px.

- `100dvh` sur html/body/#root : `height: 100%` se résout sur le *large*
  viewport, donc la barre d'URL rétractable d'un navigateur mobile masquait
  le bas de l'app. Desktop inchangé (dynamic == large viewport).
- `viewport-fit=cover` + padding `env(safe-area-inset-*)` sur le header et
  le workspace : l'app peut peindre sous une encoche sans perdre ses
  contrôles. Le zoom reste libre (accessibilité).
- Padding responsive (`p-4 sm:p-6`) : 48px de gouttière sur 360px, c'était
  13% de la largeur.
- `AgentLiveRow` et la rangée de tâche de fond empilent leurs contrôles sur
  téléphone (nom / badges / actions) et retrouvent leur ligne unique dès
  `sm` — à 360px les boutons Cancel+Retry ne tenaient pas.
- Code d'appairage : `inputMode="numeric"`, pas d'autocapitalisation.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-07-16 13:27:56 +02:00
parent fe0e53ec59
commit 48b8853214
5 changed files with 75 additions and 29 deletions

View File

@ -53,7 +53,7 @@ export function PairingScreen({ session, onPaired }: PairingScreenProps) {
}
return (
<div className="flex h-full items-center justify-center bg-canvas p-6">
<div className="flex h-full items-center justify-center overflow-y-auto bg-canvas p-4 sm:p-6">
<Panel className="w-full max-w-sm">
<form onSubmit={submit} className="flex flex-col gap-4">
<div className="flex flex-col gap-1">
@ -74,6 +74,12 @@ export function PairingScreen({ session, onPaired }: PairingScreenProps) {
placeholder="p. ex. 4821-93"
autoFocus
autoComplete="one-time-code"
// #69 — phones: summon the numeric-ish keypad for a pairing code
// and keep the OS from "helpfully" capitalising/correcting it.
inputMode="numeric"
autoCapitalize="off"
autoCorrect="off"
spellCheck={false}
disabled={busy}
invalid={!!error}
/>