Zéro overflow en 10 minutes : tester le responsive avec Claude Code et Playwright

Mon viewer de code markdown marchait parfaitement sur desktop. Sur tablette, scroll horizontal. Sur mobile, les boutons débordaient. Le classique. Sauf que cette fois, au lieu de passer 2 heures dans les DevTools à resize manuellement, j'ai laissé Claude Code faire la boucle : screenshot → diagnostic → fix → retest. 10 minutes, zéro overflow sur 10 résolutions. Voici le workflow.

Le problème — l'overflow qu'on ne voit pas

Tu codes sur un écran 1920px, tout est beau. La mise en page tient, les blocs s'emboîtent, rien ne dépasse. Tu cliques sur "Déployer", tu passes à autre chose. Ce que tu n'as pas fait : ouvrir les DevTools, passer en mode responsive, et glisser le curseur à 375px.

La tablette à 900px : le conteneur flex de la barre d'actions ne wrap pas. Quatre boutons côte à côte, chacun avec son label, qui débordent à droite. La page a un scroll horizontal. Sur mobile à 375px : en plus des boutons, le bloc <pre> qui contient du code markdown long refuse de passer à la ligne. Il s'étend horizontalement. La page entière devient scrollable à droite. Le pire dans cette situation : le bug est invisible sur desktop. Tu ne le vois que quand un utilisateur te signale "ça scrolle à droite sur mon iPad".

Sur mon viewer CLAUDE.md (view.php), c'était exactement ça. Une barre d'actions avec 4 boutons (Voir, Personnaliser, Télécharger, Copier le lien), un bloc <pre> avec le contenu markdown brut, et un wrapper avec max-width: 1100px qui ne protegeait pas contre les overflows internes. Sur desktop : parfait. Sur tablette : barre d'actions qui déborde. Sur mobile : barre + pre qui scrollent tous les deux.

L'outil — Playwright MCP dans Claude Code

Claude Code peut piloter un vrai navigateur via le MCP Playwright (Model Context Protocol). Ce n'est pas du headless "simulé" — c'est Chromium contrôlé programmatiquement, avec accès à l'intégralité du DOM et du moteur de rendu.

Une fois configuré, Claude Code a accès à ces outils :

browser_navigate(url) — charger une page
browser_resize(width, height) — changer la résolution
browser_take_screenshot() — capturer l'état visuel
browser_evaluate(js) — exécuter du JS dans la page et récupérer le résultat

Ce dernier outil est le plus puissant pour la détection d'overflow. Plutôt que d'analyser visuellement chaque screenshot, on peut tester l'overflow programmatiquement avec un one-liner :

document.documentElement.scrollWidth > document.documentElement.clientWidth
// → true = OVERFLOW, false = OK

scrollWidth est la largeur totale du contenu, y compris la partie hors écran. clientWidth est la largeur visible. Si le premier dépasse le second, la page scrolle horizontalement. Cette vérification prend 50ms et est fiable à 100%. Plus besoin d'inspecter manuellement chaque résolution.

Le workflow en boucle

Étape 1 — Définir les résolutions cibles

Couvrir le spectre complet : du grand écran au plus petit mobile encore utilisé en production.

Résolution	Cible
1920×1080	Desktop large, full HD
1366×768	Laptop courant (encore majoritaire)
1024×768	Tablette paysage
900×700	Tablette, navigateur en fenêtre réduite
768×1024	Tablette portrait (iPad standard)
480×812	Mobile large (iPhone Plus/Pro Max)
375×812	iPhone SE, iPhone mini
320×568	Petit mobile, limite basse

Étape 2 — La boucle automatisée

Pour chaque résolution, Claude Code exécute la séquence suivante :

Resize le navigateur à la résolution cible
Navigue vers la page à tester (ou reload)
Évalue scrollWidth > clientWidth — overflow présent ?
Si overflow : capture un screenshot pour voir le problème visuellement
Analyse le CSS concerné, identifie la cause
Applique le fix CSS et déploie (lftp put ciblé, 2 secondes)
Reteste à la même résolution pour confirmer la correction
Passe à la résolution suivante

La boucle est auto-corrigeante : si le fix introduit un nouveau problème à une résolution déjà validée, le test le détecte lors d'un passage de vérification globale en fin de cycle.

Étape 3 — Les fix CSS typiques

Sur mon viewer, 4 problèmes distincts, 4 fixes ciblés :

Overflow global — filet de sécurité

/* ❌ Avant : rien sur le body, overflow libre */

/* ✅ Après : filet de sécurité global */
body {
    overflow-x: hidden;
}

Bloc de code markdown — le vrai fix

/* ❌ Avant : le pre s'étend à l'infini */
pre {
    white-space: pre;
}

/* ✅ Après : wrap à toutes les résolutions */
pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 100%;
}

Barre d'actions — flex qui ne wrap pas

/* ❌ Avant : 4 boutons sur une ligne, ça déborde */
.action-bar {
    display: flex;
    gap: 8px;
}

/* ✅ Après : wrap automatique */
.action-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

Labels de boutons sur mobile

/* ✅ Icône seule sous 480px */
@media (max-width: 480px) {
    .btn-label {
        display: none;
    }
}

Un dernier trick pour les headings et paragraphes : text-wrap: pretty évite les mots orphelins en fin de ligne. Ça ne prévient pas les overflows, mais ça améliore la lisibilité sur mobile où les lignes sont courtes.

.article-content p {
    text-wrap: pretty;
}

h1, h2, h3 {
    text-wrap: balance;
}

Le prompt qui fait tout

Voici exactement ce que j'ai envoyé à Claude Code pour lancer la session :

Teste http://localhost:8000/blog/claude-md/view.php?ctx=mobile-css-redesign
à toutes les résolutions (1920, 1366, 1024, 900, 768, 480, 375, 320px).

Pour chaque résolution :
1. Resize le navigateur
2. Évalue scrollWidth > clientWidth
3. Si overflow → prends un screenshot et identifie la cause CSS
4. Corrige le CSS dans /home/odilon/work/cv/blog/assets/blog.css ou view.php
5. Deploy : lftp -e "put [fichier] -o /www/[chemin]; bye" [credentials]
6. Retest pour confirmer

Objectif : zéro overflow à toutes les résolutions. Quand toutes les résolutions
sont propres, fais un passage de vérification globale final.

Claude fait la boucle tout seul. Il resize, évalue, screenshot si problème, fixe, déploie, reteste. Il passe à la résolution suivante seulement quand la courante est propre. En fin de session, il fait un passage de vérification sur toutes les résolutions pour confirmer qu'aucun fix n'a cassé quelque chose en amont.

Le seul prérequis : avoir le MCP Playwright configuré dans Claude Code. Une fois en place, ce workflow est réutilisable sur n'importe quelle page, n'importe quel projet.

Résultat concret

Sur le viewer view.php : avant la session, overflow sur tablette (barre d'actions qui déborde) et sur mobile (pre + barre d'actions). Après : zéro overflow sur les 10 résolutions testées. Le viewer est propre du 1920px plein écran jusqu'au 320px d'un vieux mobile Android.

Sur blog.css : le breadcrumb débordait sur les titres d'articles longs à 375px. Les blocs de code avaient une hauteur max trop agressive qui cassait la lecture sur certains mobiles. Claude a identifié les deux, fixé les deux, retesté.

Temps total : 10 minutes. Pour référence, la même chose manuellement dans les DevTools — resize à la main, inspecter l'élément, modifier le CSS, actualiser, passer à la résolution suivante — c'est facilement 2 heures sur 8 résolutions et plusieurs fichiers CSS. La différence n'est pas dans la difficulté du problème. Elle est dans la longueur de la boucle de feedback.

Le deploy ciblé via lftp (un seul fichier à la fois) prend 2 secondes. Claude peut enchaîner fix → deploy → retest sur une résolution en moins de 30 secondes. Sur 2 heures de session, c'est des dizaines de cycles là où tu en ferais 5 ou 6 manuellement.

Les règles CSS à retenir

Six patterns à mémoriser — ils couvrent 95% des overflows horizontaux rencontrés en production :

overflow-x: hidden sur body — filet de sécurité global. Ne masque pas le vrai problème, le contient juste.
white-space: pre-wrap sur les <pre> — jamais de scroll horizontal sur du code ou du markdown brut. Le vrai fix, pas le filet de sécurité.
flex-wrap: wrap sur tout conteneur flex horizontal — les barres d'actions, navbars, groupes de boutons. Systématique.
max-width: 100% sur les images et les blocs de code — aucun élément ne peut dépasser son conteneur.
text-wrap: balance sur les headings — pas de mot seul sur une ligne, équilibre visuel sur mobile.
One-liner JS de vérification — à lancer sur chaque page après chaque déploiement CSS :
```
document.documentElement.scrollWidth > document.documentElement.clientWidth
```

Ces patterns sont documentés en détail dans l'article Cohérence CSS mobile — les bonnes pratiques qui changent tout et mis en contexte dans le workflow CLAUDE.md pour redesign mobile.

Conclusion

Le responsive n'est pas un problème CSS — c'est un problème de feedback loop. Le CSS pour corriger un overflow est trivial : une ligne, deux au plus. Le vrai coût, c'est le temps passé à trouver l'overflow : ouvrir les DevTools, switcher en mode responsive, glisser le curseur à 375px, inspecter l'élément, lire le CSS calculé, identifier la propriété coupable, la modifier, actualiser, vérifier, passer à la résolution suivante. Multiplié par 8 résolutions et 2 fichiers CSS.

Playwright + Claude Code réduit cette boucle à quelques secondes par résolution. La détection devient programmatique (scrollWidth > clientWidth), le fix est immédiat, le deploy prend 2 secondes. Le CSS reste exactement le même que tu l'aurais écrit à la main. C'est le temps passé à chercher et valider qui disparaît.

Ce workflow s'applique à n'importe quelle page, n'importe quelle stack. Ce n'est pas spécifique à PHP ou à un framework particulier. Il suffit d'un serveur local accessible, du MCP Playwright configuré, et d'un accès deploy. La boucle fait le reste.