Affinement et adaptation de l'agencement du bureau B2B : suppression de CLS/LCP, intégration dans un système de conception et adaptabilité entre navigateurs

Situation initiale : il existe un compte personnel B2B pour les clients d'une entreprise de logistique (commandes, statuts, documents, paiements). La mise en page a déjà été implémentée dans le projet, mais elle est assemblée en fragments et se comporte de manière instable à différents points d'arrêt. Sur certaines pages, il y a des sauts de mise en page lors du chargement des données, des tableaux « flottants », des fenêtres modales et un saut d'en-tête fixe, et sur iOS Safari, il y a des défilements horizontaux. Figma dispose d'un système de conception et de dispositions d'écran clés à jour, mais l'implémentation actuelle ne lui correspond pas.

Environnement technique : Next.js 14 (App Router), TypeScript, Modules CSS + PostCSS, utilitaires partiellement Tailwind, composants React, assemblage via Vercel. L'interface utilisateur utilise une simple bibliothèque locale de composants (Bouton, Entrée, Modal, Onglets), mais à certains endroits, les styles sont définis directement dans les composants. Les données arrivent de manière asynchrone, il y a des squelettes, une virtualisation des lignes d'un tableau sur une des pages. Dépôt sur GitHub, les tâches sont acceptées via PR.

Ce qu'il faut faire : amener l'aménagement existant à un système d'adaptabilité et de conception stable sans réécrire la logique et sans modifier la pile technologique.
- Réaliser un audit de 6 à 8 pages clés : Tableau de bord, Liste des commandes, Fiche de commande, Documents, Paiements, Profil.
- Correction de l'adaptabilité des points d'arrêt 360/768/1024/1440 sans modifier la structure des données et l'API.
- Élimine les sources de CLS et de scintillement lors du chargement : réserve des tailles pour les graphiques/tableaux/cartes, corrige les squelettes, stabilise la hauteur de l'en-tête et des barres d'outils.
- Normalisez la grille et les marges des jetons de conception de Figma : amenez la typographie, l'espacement, les rayons, les ombres aux valeurs spécifiées, supprimez les valeurs « magiques » en double.
- Améliorer les tableaux : en-tête fixe, colonnes prévisibles, césure et découpage, défilement horizontal correct uniquement à l'intérieur du tableau sur des écrans étroits, maintien de l'accessibilité.
- Correction des fenêtres modales et des listes déroulantes : positionnement correct, interdiction de défilement en arrière-plan, focus trap, travail sur iOS Safari sans sauter lorsque le clavier apparaît.
- Apportez les styles à une approche unifiée : déplacez les styles en ligne vers les modules CSS là où cela affecte la prise en charge, supprimez les classes Tailwind en conflit sur les composants problématiques sans casser le reste de la mise en page.

Limitations : vous ne pouvez pas changer radicalement la logique métier, le routage, les contrats API et la bibliothèque de composants. Vous ne pouvez pas connecter de frameworks d'interface utilisateur lourds. Il est permis d'ajouter de petits utilitaires pour mesurer/fixer les dimensions et améliorer l'accessibilité, si cela est justifié. Il est important de préserver le comportement SSR/CSR de Next.js et de ne pas dégrader les temps de build.

Résultat : des relations publiques avec des modifications de mise en page et de style, ainsi qu'un court rapport de démarque sur les problèmes trouvés et les solutions adoptées, afin que l'équipe puisse vous aider davantage.

Critères d'acceptation mesurables :
1) Sur ces pages il n'y a pas de défilement horizontal au niveau du corps d'une largeur de 360/768/1024/1440 dans Chrome/Firefox/Edge et Safari (macOS + iOS).
2) Le CLS sur le tableau de bord et la liste de commandes est réduit et ne dépasse pas 0,1 lors de la mesure de Lighthouse en mode production, le LCP n'est pas détérioré par rapport à la valeur actuelle de plus de 10 %.
3) Les tableaux ne cassent pas la grille, les colonnes sont lisibles, l'en-tête est fixe et le défilement horizontal n'apparaît qu'à l'intérieur du conteneur du tableau.
4) Fenêtres modales : le focus ne dépasse pas les limites, Esc se ferme, le défilement des pages sous la modale est bloqué, sur iOS il n'y a pas de saccades du contenu lors de l'ouverture/fermeture.
5) Les styles correspondent aux jetons de Figma en termes de paramètres de base (polices, tailles, retraits, rayons) et il n'y a pas de duplication des règles critiques à 2-3 endroits pour un composant.

Les étapes de travail attendues sont : un audit rapide et un plan d'édition, puis un PR itératif par blocs (tableaux, modaux, grille/jetons), une exécution finale et une vérification par rapport aux critères d'acceptation.