[FEATURE] Améliorer le responsive design de la plateforme

[2MJ-DEV]

🎯 Objectif

Rendre l’ensemble de la plateforme entièrement responsive afin d’assurer une expérience utilisateur optimale sur mobile, tablette et écran large.

📝 Description

Actuellement, plusieurs pages et composants de la plateforme ne s’adaptent pas correctement aux différentes tailles d’écran.
L’objectif de cette issue est d’implémenter un responsive complet en utilisant le système de breakpoints existant (ex. Tailwind CSS, CSS Grid, Flexbox).

📌 Tâches à réaliser

1. Layout global

• Adapter la sidebar pour mobile et tablette (menu burger si nécessaire).
• Ajuster le header pour éviter les débordements.
• S’assurer que le contenu principal s’adapte proprement à toutes les résolutions.

2. Composants

• Redimensionner les boutons et éléments interactifs selon les tailles d’écran.
• Revoir les grids pour que les cartes passent en 1 colonne sur mobile.
• Corriger les textes qui dépassent (overflow).

3. Pages spécifiques

• Page d’accueil : rendre la grille flexible (grid-cols-1, grid-cols-2, etc.).
• Dashboard : ajouter overflow-x-auto pour les tableaux sur mobile.
• Formulaires : adapter la largeur des champs et réorganiser les sections.

4. Images & médias

• Appliquer max-w-full et h-auto sur toutes les images.
• Vérifier les ratios pour éviter les distorsions sur mobile.

5. Tests et validation

• Tester sur :
  • Smartphone ≤ 640px
  • Tablette 641px – 1024px
  • Desktop ≥ 1024px
• Tester en mode portrait et paysage.
• Vérifier l’absence de scroll horizontal.

🛠 Technologies et recommandations

• Utiliser les breakpoints (ex. Tailwind) : sm:, md:, lg:, xl:.
• Utiliser des layouts flexibles : Flexbox, Grid.
• Ajouter des container, mx-auto et paddings adaptés.
• Utiliser overflow-x-auto pour gérer les grands tableaux.

✅ Critères d’acceptation

• Aucune page ne déborde horizontalement.
• Le design est lisible et utilisable sur toutes tailles d'écran.
• Les composants s’adaptent correctement à chaque breakpoint.
• Les images deviennent totalement fluides.
• Les formulaires restent accessibles et ergonomiques.

📎 Notes

Il serait possible de créer une prochaine issue pour :

• La refonte intégrale du design mobile.
• Un dark mode entièrement responsive.

[Kevinvkoff]

je vais cette tache

[2MJ-DEV]

@Kevinvkoff tu peut travailler dessus