fix(mobile): Sprint S — tap targets 44px + iOS safe-area #93

Merged

tarzzan merged 1 commit from feat/karbe-sprint-s into main 2026-06-03 04:20:32 +00:00

Conversation 0 Commits 1 Files changed 3 +17 -8

tarzzan commented 2026-06-03 04:20:30 +00:00

Owner

Copy link

Sprint S — Mobile polish final

Polish des deux issues mineures restantes de l'audit Sprint R : safe-area iOS et tap targets 44px.

1. /panier sticky cart drawer — iOS safe-area

bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem));

Sur iPhone (notch + home indicator) le drawer ne chevauche plus la barre du home. Fallback à 0.75rem (équivalent ancien bottom-3) sur les navigateurs sans env().

2. Tap targets remontés à min-h-[44px]

Guideline Apple/Material (44×44 px minimum pour une cible tactile).

AddToCart (/materiel/[itemId]) :

• 2 date pickers + qty number : min-h-[44px] px-3 py-2 text-base
• inputMode="numeric" sur qty pour clavier optimisé
• 2 CTA (Ajouter au panier / Voir mon panier) : min-h-[44px] py-3

Booking form (/carbets/[slug]) :

• Guest count input : min-h-[44px] px-3 py-2 text-base + inputMode
• CTA Réserver : min-h-[44px] py-3

Effet collatéral utile

text-base (16px) sur les inputs au lieu de text-sm (14px) → iOS ne zoome plus à la mise au point (iOS Safari zoome automatiquement si la font-size est < 16px, comportement frustrant sur mobile).

Test plan

• typecheck / lint / build / 89 tests ✓
• iPhone : /panier → drawer bouton « Valider et payer » ne touche pas la barre du home
• iPhone : /materiel/[itemId] → inputs date taille tap target confortable, pas de zoom à la mise au point
• iPhone : /carbets/[slug] → bouton Réserver atteint 44px+

🤖 Generated with Claude Code

## Sprint S — Mobile polish final Polish des deux issues mineures restantes de l'audit Sprint R : safe-area iOS et tap targets 44px. ### 1. `/panier` sticky cart drawer — iOS safe-area ```css bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem)); ``` Sur iPhone (notch + home indicator) le drawer ne chevauche plus la barre du home. Fallback à `0.75rem` (équivalent ancien `bottom-3`) sur les navigateurs sans `env()`. ### 2. Tap targets remontés à `min-h-[44px]` Guideline Apple/Material (44×44 px minimum pour une cible tactile). **`AddToCart`** (`/materiel/[itemId]`) : - 2 date pickers + qty number : `min-h-[44px] px-3 py-2 text-base` - `inputMode="numeric"` sur qty pour clavier optimisé - 2 CTA (Ajouter au panier / Voir mon panier) : `min-h-[44px] py-3` **Booking form** (`/carbets/[slug]`) : - Guest count input : `min-h-[44px] px-3 py-2 text-base` + `inputMode` - CTA Réserver : `min-h-[44px] py-3` ### Effet collatéral utile `text-base` (16px) sur les inputs au lieu de `text-sm` (14px) → iOS **ne zoome plus** à la mise au point (iOS Safari zoome automatiquement si la font-size est < 16px, comportement frustrant sur mobile). ### Test plan - [x] typecheck / lint / build / 89 tests ✓ - [ ] iPhone : `/panier` → drawer bouton « Valider et payer » ne touche pas la barre du home - [ ] iPhone : `/materiel/[itemId]` → inputs date taille tap target confortable, pas de zoom à la mise au point - [ ] iPhone : `/carbets/[slug]` → bouton Réserver atteint 44px+ 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tarzzan added 1 commit 2026-06-03 04:20:31 +00:00

fix(mobile): Sprint S — tap targets 44px + iOS safe-area ... 06b01f65e2

Polish final mobile :

1. /panier sticky cart drawer respecte la safe-area iOS Safari (notch +
   home indicator) :
   - bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem))
   - Fallback à 0.75rem (équivalent ancien bottom-3) sur les navigateurs
     sans env().

2. AddToCart inputs et boutons remontés à min-h-44px (guideline Apple/
   Material) :
   - 2 date pickers + qty number : min-h-[44px] px-3 py-2 text-base
   - inputMode="numeric" sur qty pour clavier optimisé
   - 2 CTA buttons (Ajouter / Voir mon panier) : min-h-[44px] py-3

3. Booking form /carbets/[slug] :
   - Guest count input : min-h-[44px] px-3 py-2 text-base + inputMode
   - CTA Réserver : min-h-[44px] py-3

Avant : inputs/buttons ~36-40px (sous le seuil 44px iOS), text-sm
(14px). Après : 44px+ partout, text-base (16px) sur les inputs où le
user tape → meilleur contraste tactile et le clavier iOS ne zoom plus
(iOS zoome si font-size < 16px).

Pas de tests vitest dédiés (changements purement CSS), mais 89/89
restent verts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

tarzzan merged commit cd8c04977f into main 2026-06-03 04:20:32 +00:00

tarzzan deleted branch feat/karbe-sprint-s 2026-06-03 04:20:32 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: tarzzan/karbe#93

No description provided.