feat(web): passe responsive téléphone (portage mobile #39, phase 3) #55

Merged

kyuno merged 1 commit from feat/mobile-responsive-pass into main

2026-09-06 03:56:01 +02:00

kyuno commented

2026-09-06 03:40:24 +02:00

Owner

Troisième phase du portage mobile #39 : la passe responsive pour le contenu des pages. Tout est strictement additif sous 640px — le rendu desktop est inchangé (les tests desktop existants de layout.cy.ts passent tels quels).

Principe directeur repris du ticket : réutiliser la philosophie déjà en place pour la sidebar (AppLayout.scss — défilement horizontal plutôt que compression illisible) au lieu d'inventer un patron par page.

Contenu

AppLayout.scss — .app-content passe de var(--space-xl) (32px) à var(--space-md) (16px) sous 640px. ~64px de largeur utile récupérés sur un écran de ~375px, pour toutes les pages d'un coup.
planning-page.scss — la grille 7 jours × 5 repas défile déjà horizontalement (.planning-grid-wrapper { overflow: auto } + table { min-width: 62rem }), donc pas de refonte « un jour à la fois » pour cette itération. Ce qui casse au tactile :
- .recipe-chip__remove (le ✕ de suppression) est opacity: 0 hors survol → invisible et intappable sur mobile. Épinglé visible + cible tactile agrandie sous 640px.
- .add-recipe-btn (le +) — padding porté à var(--space-sm) pour une cible confortable.
dialog.scss — .dialog-panel garde une gouttière latérale (max-width: calc(100vw - var(--space-md))) et récupère de la hauteur utile sous 640px (le var(--space-2xl) vertical est trop cher sur un écran court).
recipe-picker-dialog.scss — le split 2 colonnes du catalogue, forcé par une règle plus spécifique que le @media de recipes.scss, repasse à une seule colonne sous 640px (liste puis panneau de détail empilés, comme la page /recettes).

RecipesPage empile déjà son master-detail sous 1024px (recipes.scss) — vérifié OK à 375px, rien à ajouter.

Tests

layout.cy.ts gagne un bloc « Responsive breakpoint — page content under 640px » :

.app-content : padding 32px en desktop, 16px à 375px ;
la grille planning est bien sur son propre scroll horizontal (scrollWidth > clientWidth) sans faire déborder le document ;
le ✕ de suppression d'une recette est visible (opacity > 0) à 375px.

Vérifié en local : layout.cy.ts 10/10 via start-server-and-test (même harnais que le job e2e de la CI). pnpm build + pnpm lint verts.

Avancement de #39 — l'issue reste ouverte (phase 2 : coquille Capacitor).

🤖 Generated with Claude Code

Troisième phase du [portage mobile #39](https://git.dev.kyuno.fr/kyuno/batchCooking/issues/39) : la passe responsive pour le contenu des pages. **Tout est strictement additif sous 640px** — le rendu desktop est inchangé (les tests desktop existants de `layout.cy.ts` passent tels quels). Principe directeur repris du ticket : réutiliser la philosophie déjà en place pour la sidebar (`AppLayout.scss` — *défilement horizontal plutôt que compression illisible*) au lieu d'inventer un patron par page. ## Contenu - **`AppLayout.scss`** — `.app-content` passe de `var(--space-xl)` (32px) à `var(--space-md)` (16px) sous 640px. ~64px de largeur utile récupérés sur un écran de ~375px, pour toutes les pages d'un coup. - **`planning-page.scss`** — la grille 7 jours × 5 repas défile **déjà** horizontalement (`.planning-grid-wrapper { overflow: auto }` + `table { min-width: 62rem }`), donc pas de refonte « un jour à la fois » pour cette itération. Ce qui casse au tactile : - `.recipe-chip__remove` (le `✕` de suppression) est `opacity: 0` hors survol → invisible **et intappable** sur mobile. Épinglé visible + cible tactile agrandie sous 640px. - `.add-recipe-btn` (le `+`) — padding porté à `var(--space-sm)` pour une cible confortable. - **`dialog.scss`** — `.dialog-panel` garde une gouttière latérale (`max-width: calc(100vw - var(--space-md))`) et récupère de la hauteur utile sous 640px (le `var(--space-2xl)` vertical est trop cher sur un écran court). - **`recipe-picker-dialog.scss`** — le split 2 colonnes du catalogue, forcé par une règle plus spécifique que le `@media` de `recipes.scss`, repasse à une seule colonne sous 640px (liste puis panneau de détail empilés, comme la page `/recettes`). `RecipesPage` empile déjà son master-detail sous 1024px (`recipes.scss`) — vérifié OK à 375px, rien à ajouter. ## Tests `layout.cy.ts` gagne un bloc *« Responsive breakpoint — page content under 640px »* : - `.app-content` : padding 32px en desktop, 16px à 375px ; - la grille planning est bien sur son propre scroll horizontal (`scrollWidth > clientWidth`) **sans** faire déborder le document ; - le `✕` de suppression d'une recette est visible (`opacity > 0`) à 375px. **Vérifié en local : `layout.cy.ts` 10/10** via `start-server-and-test` (même harnais que le job `e2e` de la CI). `pnpm build` + `pnpm lint` verts. Avancement de #39 — l'issue reste ouverte (phase 2 : coquille Capacitor). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-06 03:40:24 +02:00

feat(web): passe responsive téléphone pour le contenu des pages (#39 phase 3)

CI / lint (push) Successful in 2m28s

Details

CI / build (push) Successful in 2m42s

Details

CI / intent-service-test (push) Successful in 4m27s

Details

CI / e2e (push) Successful in 8m24s

Details

CI / test (push) Successful in 15m28s

Details

a8d86c7099

Réutilise la philosophie déjà en place pour la sidebar (défilement
horizontal plutôt que compression illisible) au lieu d'un nouveau patron
par page. Tout est strictement additif sous 640px — le rendu desktop est
inchangé.

- `AppLayout.scss` : `.app-content` passe de `--space-xl` (32px) à
  `--space-md` (16px) sous 640px — 64px de largeur utile récupérés sur un
  écran de ~375px.
- `planning-page.scss` : la grille 7 jours défile déjà horizontalement
  (`overflow: auto` + `min-width: 62rem`) ; ce qui casse au tactile, c'est
  le `✕` de suppression d'une recette (`opacity: 0` hors survol) — épinglé
  visible + cible tactile agrandie sous 640px, idem le bouton « + ».
- `dialog.scss` : `.dialog-panel` garde une gouttière latérale et gagne en
  hauteur utile sous 640px (le `--space-2xl` vertical est trop cher sur un
  écran court).
- `recipe-picker-dialog.scss` : le split 2 colonnes forcé du catalogue
  (plus spécifique que le `@media` de recipes.scss) repasse à une colonne
  sous 640px.

Tests : `layout.cy.ts` gagne un bloc « page content under 640px » —
padding de `.app-content`, grille sur son propre scroll sans déborder la
page, `✕` visible au tactile. 10/10 en local.

Refs #39
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>