Front #4 — Rendre les grilles responsive fluides (mobile-first)

[RebelliousSmile]

Type : CSS / UX · Priorité : haute
Provenance : maquette front + capture mobile. Phase 6 / front pur.

Constat (vérifié au source)

Plusieurs grilles utilisent des paliers fixes façon grid-cols-N md:grid-cols-M lg:grid-cols-K :

• templates/characters/gm_dashboard.html:13 — stats : grid grid-cols-2 sm:grid-cols-4
• templates/characters/gm_dashboard.html:72 — NPC : grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4
• également home.html, games/detail.html, users/profile.html

Sur mobile réel (hors device-switch), les cartes stat débordent horizontalement (4e carte coupée en capture).

Attendu

Grilles qui se replient sur la largeur réelle du conteneur, pas sur des breakpoints d'écran fixes (repeat(auto-fit/auto-fill, minmax(...))).

Piste d'implémentation

Ajouter des shortcuts réutilisables dans frontend/uno.config.js, p. ex. :

'grid-cards': 'grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]',
'grid-stats': 'grid gap-2.5 grid-cols-[repeat(auto-fit,minmax(130px,1fr))]',

et remplacer les grid-cols-N md:grid-cols-M sur les pages concernées.

Fait quand

La grille de stats du dashboard et les grilles de personnages ne débordent plus à 360 px de large ; aucun scroll horizontal involontaire.

---

Vérifié sur main (2026-07-07) : grilles à paliers fixes confirmées dans gm_dashboard.html ; frontend/uno.config.js présent.