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>

frontend/src/features/web/PairingScreen.tsx

@@ -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}
               />

frontend/src/features/web/WebApp.tsx

@@ -49,9 +49,12 @@ export function WebApp({ session }: WebAppProps = {}) {
 
   return (
     <div className="flex h-full flex-col bg-canvas text-content">
-      <header className="flex shrink-0 items-center justify-between border-b border-border px-6 py-3">
+      <header
+        data-testid="web-header"
+        className="flex shrink-0 items-center justify-between border-b border-border px-4 py-3 pt-[max(0.75rem,env(safe-area-inset-top))] pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:px-6"
+      >
         <div className="flex items-baseline gap-2">
-          <h1 className="text-lg font-semibold tracking-tight">IdeA</h1>
+          <h1 className="text-base font-semibold tracking-tight sm:text-lg">IdeA</h1>
           <span className="rounded-md bg-raised px-1.5 py-0.5 text-[0.65rem] font-medium uppercase text-muted">
             web
           </span>

frontend/src/features/web/WebWorkspace.tsx

@@ -75,7 +75,10 @@ export function WebWorkspace() {
   );
 
   return (
-    <div className="flex h-full flex-col gap-4 overflow-y-auto p-6">
+    <div
+      data-testid="web-workspace"
+      className="flex h-full flex-col gap-4 overflow-y-auto p-4 pb-[max(1rem,env(safe-area-inset-bottom))] pl-[max(1rem,env(safe-area-inset-left))] pr-[max(1rem,env(safe-area-inset-right))] sm:p-6"
+    >
       <ReconnectBanner />
       <div className="flex items-center justify-between">
         <h2 className="text-base font-semibold tracking-tight">Projets</h2>
@@ -223,7 +226,11 @@ function AgentLiveRow({
 
   return (
     <li className="py-2 first:pt-0 last:pb-0">
-      <div className="flex items-center justify-between gap-2">
+      {/* #69 — at 360px the name + two badges + the button no longer fit on one
+          line, so the name takes its own row on phones and the status cluster
+          wraps under it. From `sm` up this collapses back to the original
+          single-line desktop layout. */}
+      <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
         <span className="min-w-0 truncate text-sm text-content">{agent.name}</span>
         <span className="flex shrink-0 items-center gap-1.5 text-xs">
           <span className={cn("rounded-full px-2 py-0.5 font-medium", live ? "bg-success/15 text-success" : "bg-raised text-muted")}>
@@ -311,29 +318,36 @@ function WebBackgroundTaskRow({
 
   return (
     <li className="min-w-0 text-xs text-muted">
-      <div className="flex min-w-0 items-center gap-2">
-        <span className={cn("shrink-0 rounded-full px-1.5 py-0.5 font-medium", taskStatusClass(task.status))}>
-          {TASK_STATUS_LABEL[task.status]}
-        </span>
-        <span className="min-w-0 flex-1 truncate text-content">{task.kind}</span>
-        <Button
-          size="sm"
-          variant="ghost"
-          disabled={!canCancel || actionBusy}
-          loading={actionBusy}
-          onClick={() => void runAction((id) => workState.cancelBackgroundTask(id))}
-        >
-          Cancel
-        </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          disabled={!canRetry || actionBusy}
-          loading={actionBusy}
-          onClick={() => void runAction((id) => workState.retryBackgroundTask(id))}
-        >
-          Retry
-        </Button>
+      {/* #69 — status + kind + Cancel + Retry overflow a phone row. On narrow
+          screens the status/kind pair keeps the first line and the two actions
+          wrap onto a second, right-aligned one; `sm` restores the single row. */}
+      <div className="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className={cn("shrink-0 rounded-full px-1.5 py-0.5 font-medium", taskStatusClass(task.status))}>
+            {TASK_STATUS_LABEL[task.status]}
+          </span>
+          <span className="min-w-0 flex-1 truncate text-content">{task.kind}</span>
+        </div>
+        <div className="flex shrink-0 items-center justify-end gap-1">
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={!canCancel || actionBusy}
+            loading={actionBusy}
+            onClick={() => void runAction((id) => workState.cancelBackgroundTask(id))}
+          >
+            Cancel
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={!canRetry || actionBusy}
+            loading={actionBusy}
+            onClick={() => void runAction((id) => workState.retryBackgroundTask(id))}
+          >
+            Retry
+          </Button>
+        </div>
       </div>
       {message && <p role="alert" className="mt-1 text-danger">{message}</p>}
     </li>

frontend/src/shared/styles/theme.css

@@ -60,12 +60,28 @@
     height: 100%;
   }
 
+  /* #69 — phone viewports. `height: 100%` resolves against the *large* viewport,
+     so a mobile browser's collapsing URL bar leaves the last ~60px of the app
+     under the toolbar and makes xterm's fit() overshoot. `100dvh` tracks the
+     *dynamic* viewport instead. Desktop is unaffected: there the dynamic and
+     large viewports are identical, so this resolves to the same height. */
+  @supports (height: 100dvh) {
+    html,
+    body,
+    #root {
+      height: 100dvh;
+    }
+  }
+
   body {
     margin: 0;
     background-color: var(--color-canvas);
     color: var(--color-content);
     font-family: var(--font-sans);
     -webkit-font-smoothing: antialiased;
+    /* Phones: never rubber-band the whole document — the app owns its own
+       scroll containers, and an overscrolling body detaches the fixed shell. */
+    overscroll-behavior-y: none;
   }
 
   /* A consistent focus ring across the kit (keyboard accessibility). */