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:
@ -2,7 +2,14 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- `viewport-fit=cover` (#69) lets the web client paint under a notch and
|
||||
exposes the `env(safe-area-inset-*)` values the shell pads with. Zoom is
|
||||
deliberately left unrestricted (no `maximum-scale`/`user-scalable=no`):
|
||||
pinch-zoom is an accessibility affordance. -->
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
|
||||
/>
|
||||
<title>IdeA</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -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}
|
||||
/>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,11 +318,17 @@ function WebBackgroundTaskRow({
|
||||
|
||||
return (
|
||||
<li className="min-w-0 text-xs text-muted">
|
||||
{/* #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"
|
||||
@ -335,6 +348,7 @@ function WebBackgroundTaskRow({
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{message && <p role="alert" className="mt-1 text-danger">{message}</p>}
|
||||
</li>
|
||||
);
|
||||
|
||||
@ -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). */
|
||||
|
||||
Reference in New Issue
Block a user