[UI mobile] Popovers flottants → sûrs sur mobile #87

New issue

Closed

opened 2026-09-07 11:33:14 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-07 11:33:14 +02:00

Owner

Résumé

LeftoversBasket et le calendrier de semaine (week-navigator) sont deux
popovers flottants à largeur fixe, ancrés right: 0, sans aucune gestion
de bord d'écran — sur un téléphone étroit ils peuvent déborder hors du
viewport, rendant leurs boutons inaccessibles. Fait partie du chantier "UI
mobile & tablette" (voir le ticket socle de ce même chantier).

Contexte (trouvé en auditant le code, pas supposé)

apps/web/src/features/planning/leftovers-basket.scss :
.leftovers-basket__popover { position: absolute; width: 20rem; right: 0; ... } — aucune règle @media dans ce fichier.
apps/web/src/features/planning/week-navigator.scss :
.calendar-popover { position: absolute; width: 18rem; right: 0; ... } —
aucune règle @media non plus.

Les deux sont déclenchés depuis l'en-tête de PlanningPage, un écran
central de l'usage quotidien — c'est très probablement l'exemple concret
derrière le retour terrain "je n'ai pas accès à tous les boutons" sur
mobile.

Contenu attendu

Sous le breakpoint phone (nommé, introduit par le ticket socle) : basculer
ces deux popovers sur le primitif "feuille mobile" (bottom sheet) du même
ticket socle plutôt que de rester des popovers positionnés en absolu — ou a
minima les clamper/repositionner pour ne jamais déborder du viewport si la
feuille mobile ne convient pas au cas d'usage précis.

Dépendances

Dépend du ticket socle (nav/popovers/dialogs mobile-natifs) pour le
primitif de feuille mobile.

## Résumé `LeftoversBasket` et le calendrier de semaine (`week-navigator`) sont deux popovers flottants à largeur fixe, ancrés `right: 0`, sans aucune gestion de bord d'écran — sur un téléphone étroit ils peuvent déborder hors du viewport, rendant leurs boutons inaccessibles. Fait partie du chantier "UI mobile & tablette" (voir le ticket socle de ce même chantier). ## Contexte (trouvé en auditant le code, pas supposé) - `apps/web/src/features/planning/leftovers-basket.scss` : `.leftovers-basket__popover { position: absolute; width: 20rem; right: 0; ... }` — **aucune règle `@media` dans ce fichier.** - `apps/web/src/features/planning/week-navigator.scss` : `.calendar-popover { position: absolute; width: 18rem; right: 0; ... }` — **aucune règle `@media` non plus.** Les deux sont déclenchés depuis l'en-tête de `PlanningPage`, un écran central de l'usage quotidien — c'est très probablement l'exemple concret derrière le retour terrain "je n'ai pas accès à tous les boutons" sur mobile. ## Contenu attendu Sous le breakpoint phone (nommé, introduit par le ticket socle) : basculer ces deux popovers sur le primitif "feuille mobile" (bottom sheet) du même ticket socle plutôt que de rester des popovers positionnés en absolu — ou a minima les clamper/repositionner pour ne jamais déborder du viewport si la feuille mobile ne convient pas au cas d'usage précis. ## Dépendances Dépend du ticket socle (nav/popovers/dialogs mobile-natifs) pour le primitif de feuille mobile.