From 48b88532144fbb18febcb3cd964929fddeb9f116 Mon Sep 17 00:00:00 2001 From: Blomios Date: Thu, 16 Jul 2026 13:27:56 +0200 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20shell=20web=20responsive=20po?= =?UTF-8?q?ur=20viewport=20t=C3=A9l=C3=A9phone=20(#69)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/index.html | 9 ++- frontend/src/features/web/PairingScreen.tsx | 8 ++- frontend/src/features/web/WebApp.tsx | 7 ++- frontend/src/features/web/WebWorkspace.tsx | 64 +++++++++++++-------- frontend/src/shared/styles/theme.css | 16 ++++++ 5 files changed, 75 insertions(+), 29 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 1c0d567..61688b2 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,7 +2,14 @@ - + + IdeA diff --git a/frontend/src/features/web/PairingScreen.tsx b/frontend/src/features/web/PairingScreen.tsx index 04e0685..32bb704 100644 --- a/frontend/src/features/web/PairingScreen.tsx +++ b/frontend/src/features/web/PairingScreen.tsx @@ -53,7 +53,7 @@ export function PairingScreen({ session, onPaired }: PairingScreenProps) { } return ( -
+
@@ -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} /> diff --git a/frontend/src/features/web/WebApp.tsx b/frontend/src/features/web/WebApp.tsx index b24e072..c222a49 100644 --- a/frontend/src/features/web/WebApp.tsx +++ b/frontend/src/features/web/WebApp.tsx @@ -49,9 +49,12 @@ export function WebApp({ session }: WebAppProps = {}) { return (
-
+
-

IdeA

+

IdeA

web diff --git a/frontend/src/features/web/WebWorkspace.tsx b/frontend/src/features/web/WebWorkspace.tsx index 3d978d2..ecce05b 100644 --- a/frontend/src/features/web/WebWorkspace.tsx +++ b/frontend/src/features/web/WebWorkspace.tsx @@ -75,7 +75,10 @@ export function WebWorkspace() { ); return ( -
+

Projets

@@ -223,7 +226,11 @@ function AgentLiveRow({ return (
  • -
    + {/* #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. */} +
    {agent.name} @@ -311,29 +318,36 @@ function WebBackgroundTaskRow({ return (
  • -
    - - {TASK_STATUS_LABEL[task.status]} - - {task.kind} - - + {/* #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. */} +
    +
    + + {TASK_STATUS_LABEL[task.status]} + + {task.kind} +
    +
    + + +
    {message &&

    {message}

    }
    • diff --git a/frontend/src/shared/styles/theme.css b/frontend/src/shared/styles/theme.css index e48ebb0..8775763 100644 --- a/frontend/src/shared/styles/theme.css +++ b/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). */