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:
@ -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}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user