Skip to content

« Un souci ? » à la place de « Médiation », et un en-tête sur une seule ligne - #44

Merged
flocom merged 1 commit into
mainfrom
claude/remove-apel-sensitive-data-73l5iu
Sep 10, 2026
Merged

« Un souci ? » à la place de « Médiation », et un en-tête sur une seule ligne#44
flocom merged 1 commit into
mainfrom
claude/remove-apel-sensitive-data-73l5iu

Conversation

@flocom

@flocom flocom commented Sep 10, 2026

Copy link
Copy Markdown
Owner

Deux corrections sur la fonctionnalité livrée en #43.

Le mot

« Médiation » est le vocabulaire du bureau, pas celui d'un parent qui hésite à écrire : il faut déjà savoir ce que le terme recouvre pour cliquer dessus. Le bouton dit « Un souci ? », l'adresse passe de /mediation à /contact, et le mot disparaît partout où il était visible :

Endroit Avant Après
Bouton de l'en-tête Médiation Un souci ?
Adresse /mediation /contact
Étiquette du héros MÉDIATION ON VOUS ÉCOUTE
Objet de l'e-mail Demande de médiation — {nom} Une famille vous écrit — {nom}
Composants et schémas MediationForm, mediationRequestSchema ContactForm, familyMessageSchema

La ligne unique

Il manquait exactement 2 pixels à 390 px (300 px de liens pour 298 disponibles) : l'en-tête basculait sur deux rangées. Trois retouches le ramènent à une ligne, sans rien masquer :

  • l'icône du bouton rouge n'apparaît qu'à partir de 640 px — ces 22 px étaient précisément ce qui faisait basculer ;
  • marges et gouttières resserrées sous sm ;
  • « S'inscrire » sur petit écran, « Créer un compte » au-delà.
Largeur Rangées du menu Hauteur de l'en-tête
320 px 2 (aucun débordement) 100 px
360 px 1 76 px
390 px 1 76 px
430 px 1 76 px
768 / 1280 px 1 76 px

76 px, c'est la hauteur qu'avait l'en-tête avant l'ajout du bouton. La ligne unique ne cède qu'en dessous de 360 px — un iPhone SE de première génération — et les actions y passent sur deux rangées plutôt que de déborder.

Vérifications

Instance réelle, navigateur réel, serveur SMTP de test : le bouton mène à /contact, le mot « médiation » est absent de la page comme de l'e-mail, le formulaire s'envoie depuis un téléphone et le message arrive au bureau avec son sujet et son Reply-To.

🤖 Generated with Claude Code

https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD


Generated by Claude Code

« Médiation » est le mot du bureau, pas celui d'un parent qui hésite à
écrire : il faut déjà savoir ce que le terme recouvre pour cliquer
dessus. Le bouton dit maintenant « Un souci ? », l'adresse devient
/contact, et le mot disparaît de la page, de l'e-mail reçu par le bureau
et des noms de composants.

L'en-tête, lui, passait sur deux lignes dès qu'un troisième bouton
s'ajoutait : il manquait exactement 2 pixels à 390 px. Les trois actions
tiennent désormais sur une seule ligne à partir de 360 px — icône du
bouton rouge repoussée au-delà de 640 px, marges resserrées, et
« S'inscrire » plutôt que « Créer un compte » sur petit écran. L'en-tête
retrouve ses 76 px de haut, sa hauteur d'avant cette fonctionnalité.

En dessous de 360 px — un iPhone SE de première génération — les actions
passent sur deux rangées plutôt que de déborder : c'est le seul cas où la
ligne unique cède, et rien n'est masqué.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD
@flocom
flocom merged commit 399e211 into main Sep 10, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants