Commit febb485d authored Aug 29, 2026 by Kourser

Une case à cocher n'est pas un champ de saisie

Le formulaire de création de canal montrait sa case au milieu de la ligne et
son libellé collé au bord opposé. On croyait à un alignement raté dans cet
écran-là ; c'était la feuille de style, et les neuf cases de l'application le
subissaient depuis toujours.

La règle générique donne « width: 100% » à tout ce qui est « input ». C'est
juste pour un champ de texte et absurde pour une case : elle s'étirait sur
toute la largeur disponible — 1127 pixels, mesurés sur la page — son glyphe se
dessinait au centre de cette boîte, et le libellé était repoussé à droite. La
ligne 377 contournait déjà le même défaut pour les curseurs de rembobinage,
localement : le symptôme avait été traité une fois, la cause jamais.

Les cases et les boutons radio reprennent donc leur largeur propre. Et
« flex: none » avec, sans quoi une case dans une ligne flex se laisse comprimer
par un libellé long jusqu'à devenir un trait.

Mesuré plutôt que constaté
  Sur la page servie, une case passe de 1127 à 13 pixels, se pose au bord
  gauche de son libellé, et leurs centres s'alignent. Vérifié après
  reconstruction du paquet, pas seulement en injectant la règle. Les boutons
  radio suivent. 938 garanties, aucune en échec.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

parent 0b08bcd6

apps/web/src/styles.css

+16 −0

Changes for apps/web/src/styles.css: 16 added lines, 0 removed lines.
Original line number	Diff line number	Diff line
		@@ -164,6 +164,22 @@ input, textarea, select {
		textarea { font-family: "Source Serif 4", Georgia, serif; line-height: 1.5; resize: vertical; }
		input::placeholder, textarea::placeholder { color: var(--encre-3); }

		/* Une case à cocher n'est pas un champ de saisie.
		*
		* La règle ci-dessus donne « width: 100% » à tout ce qui est « input », ce qui
		* convient à un champ de texte et défigure une case : elle s'étirait sur toute
		* la largeur, son glyphe se dessinait au milieu de cette boîte, et le libellé
		* était repoussé au bord opposé. On croyait à une erreur d'alignement dans
		* l'écran fautif ; c'était la feuille de style, et les neuf cases de
		* l'application le subissaient.
		*
		* « flex: none » en plus de la largeur : dans une ligne flex, une case sans
		* cela se laisse comprimer par un libellé long et devient un trait. */
		input[type="checkbox"], input[type="radio"] {
		width: auto; padding: 0; margin: 0; flex: none;
		accent-color: var(--accent);
		}

		label { display: block; font-size: 12px; font-weight: 600; color: var(--encre-2);
		margin-bottom: 4px; }
		.champ { margin-bottom: 14px; }