From 84003d200937d5f60e1740546fd8db6704bc9bbc Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslef53@gmail.com>
Date: Tue, 18 Aug 2026 13:21:45 +0200
Subject: [PATCH] =?UTF-8?q?fix(recipes):=20emp=C3=AAche=20la=20s=C3=A9lect?=
 =?UTF-8?q?ion=20de=20texte=20native=20sur=20les=20chips/cartes=20du=20pic?=
 =?UTF-8?q?ker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les boutons de filtre (catégorie/sous-catégorie/toggles) et les cartes
d'ingrédients n'avaient pas user-select: none — un clic qui bouge d'un
pixel (clic rapide, trackpad) est alors lu comme un glisser de
sélection de texte, et le surlignage natif du navigateur s'affiche à
la place de l'état .active attendu. Vu de l'extérieur ça ressemble à
un bug de CSS de sélection flaky ; c'est en fait ce surlignage natif
qui apparaît par intermittence.

Ajouté sur .ingredient-picker (hérité par tous ses boutons enfants),
avec un user-select: text explicite ré-appliqué sur le champ de
recherche pour ne pas casser le copier/coller dedans.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/src/features/recipes/recipes.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/apps/web/src/features/recipes/recipes.scss b/apps/web/src/features/recipes/recipes.scss
index d0bfe92..dcc46a1 100644
--- a/apps/web/src/features/recipes/recipes.scss
+++ b/apps/web/src/features/recipes/recipes.scss
@@ -689,6 +689,13 @@
   display: flex;
   flex-direction: column;
   gap: var(--space-sm);
+  // Every clickable chip/card below is a plain `<button>` with no text to
+  // actually select — without this, a click that moves even a pixel (a
+  // fast click, a trackpad) is read as a text-selection drag instead, and
+  // the browser's native selection highlight paints over the intended
+  // `.active` state. Reads as "the selection styling is flaky" from the
+  // outside; this is the actual cause, not the `.active` rules themselves.
+  user-select: none;
   padding: var(--space-sm);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
@@ -712,6 +719,10 @@
       border-radius: var(--radius-base);
       background: var(--color-surface-alt);
       color: var(--color-text);
+      // Undo the container's `user-select: none` — that rule exists for
+      // the chip/card buttons, not this text input; a search box the user
+      // can't select/copy text from would be its own bug.
+      user-select: text;
     }
   }