From ad8ba982c2ae2edfbec122c72390c9c7379169f0 Mon Sep 17 00:00:00 2001 From: Frederic Cabassut Date: Mon, 9 Mar 2026 01:16:59 +0100 Subject: [PATCH] docs: add mobile hover actions best practice to CLAUDE.md Document the opacity-based pattern for hover actions that ensures they're always visible on touch devices. Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CLAUDE.md b/CLAUDE.md index 6e3810b..b189a22 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -55,6 +55,7 @@ Note colors for cards are defined in `src/lib/utils/colors.ts`. - **Background texture**: A subtle 4px pixel grid overlay at 3% opacity (defined in `body::before`). - **Checkboxes**: Use `accent-color: var(--primary)` globally — gold checkboxes match the theme. - **Icons**: Lucide icons throughout. Keep at 16-20px size. +- **Hover actions**: Never use `hidden group-hover:block` for action buttons — they're invisible on mobile (no hover). Use the opacity pattern instead: `max-md:opacity-100 md:opacity-0 transition-opacity md:group-hover:opacity-100`. This keeps actions always visible on touch devices and hover-revealed on desktop. ### Layout groups