Trois applications sans mise en page mobile, une sans navigation
A fixed w-[260px] sidebar with no breakpoint squeezed main to 130px at 390px wide, rendering page titles one glyph per line.
Visible seulement en s'en servant
Invisible à la relecture du code. Trouvé en étant le vrai utilisateur, sur un vrai appareil, à une vraie largeur.
La plainte était que l'application était « très bordélique » sur un téléphone. Mesuré à 390px :
L'admin et le super-admin avaient un <aside> à w-[260px] flex-shrink-0 sans point de rupture, écrasant main à 130px. Les titres de page s'affichaient un glyphe par ligne, verticalement ; le texte des éléments de liste mesurait clientWidth: 0. Le web client connecté avait exactement un <a href> sur toute la page — pas de Tableau de bord, Enfants, Documents, Messages, Entretiens, Profil ou Paramètres atteignable du tout, parce que toute la navigation vivait dans une barre latérale lg:block sans équivalent mobile. Déconnecté, l'en-tête débordait de 32px à 360 et 390. Et le conteneur de toasts était fixed top-4 right-4 w-[min(100vw-2rem,42rem)], donc à 390px la branche viewport l'emporte et chaque toast faisait toute la largeur en travers de l'en-tête de la page.
Écarté d'abord pour que personne ne le re-signale : le <meta> viewport est correct dans les trois fichiers index.html. C'était une vraie casse de mise en page.
La partie inconfortable, c'est que chacun de ces cas est visible en redimensionnant une fenêtre de navigateur, et l'application était passée par plusieurs nettoyages de design sans que personne ne le fasse.