From 2e9dc6a37b6aa556eaf8f102a4b5023737a30481 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 30 Aug 2026 03:43:35 +0000
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20les=20onglets=20d'un=20=C3=A9v?=
 =?UTF-8?q?=C3=A9nement=20et=20la=20connexion=20sur=20t=C3=A9l=C3=A9phone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Deux défauts vus sur un vrai téléphone.

Les onglets d'un événement étaient en grille de quatre colonnes quelle que
soit la largeur : sur un écran de 390 px, chaque onglet disposait de 85 px
pour une icône, un intitulé et un compteur. Les trois débordaient et se
chevauchaient — « Aperçu » recouvert par « Préparation », les compteurs
posés sur les libellés voisins. La grille passe à deux colonnes sur
téléphone et retrouve sa rangée unique à partir de 640 px ; un nombre
impair d'onglets laisse le dernier occuper toute la largeur plutôt que la
moitié.

Le lien « Connexion » de l'en-tête public portait `hidden sm:inline` :
sous 640 px, un visiteur déjà inscrit ne voyait que « Créer un compte »,
sans aucun moyen d'atteindre sa page de connexion depuis le site public.
Il est désormais toujours affiché, avec une cible tactile de 40 px, et les
marges du bouton voisin se resserrent sur les petits écrans pour que les
deux tiennent côte à côte.

Vérifié à 320, 390, 430, 768 et 1280 px : aucun chevauchement, aucun
intitulé tronqué, aucun débordement horizontal — y compris avec un logo
d'association volontairement très large.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD
---
 src/app/dashboard/events/[id]/page.tsx | 20 ++++++++++++++------
 src/components/site-header.tsx         |  4 ++--
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/dashboard/events/[id]/page.tsx b/src/app/dashboard/events/[id]/page.tsx
index c67d78d..023aea1 100644
--- a/src/app/dashboard/events/[id]/page.tsx
+++ b/src/app/dashboard/events/[id]/page.tsx
@@ -666,36 +666,44 @@ function EventDetailNav({
   ] as const;
 
   return (
+    // Deux colonnes sur téléphone, une seule rangée à partir de sm : à quatre
+    // colonnes sur 390 px, chaque onglet disposait de 85 px pour un intitulé,
+    // une icône et un compteur, et les trois se chevauchaient.
     <nav
       aria-label="Sections de l’événement"
       className={cn(
-        "grid gap-1 rounded-2xl border border-slate-200 bg-slate-100 p-1.5",
-        showBudget ? "grid-cols-4" : "grid-cols-3",
+        "grid grid-cols-2 gap-1 rounded-2xl border border-slate-200 bg-slate-100 p-1.5",
+        showBudget ? "sm:grid-cols-4" : "sm:grid-cols-3",
       )}
     >
-      {tabs.map((tab) => {
+      {tabs.map((tab, index) => {
         const Icon = tab.icon;
         const selected = tab.id === active;
+        // Un nombre impair d'onglets laisse le dernier seul sur sa rangée :
+        // il prend alors toute la largeur plutôt que la moitié.
+        const seulSurSaRangee =
+          tabs.length % 2 === 1 && index === tabs.length - 1;
         return (
           <Link
             key={tab.id}
             href={tab.href}
             aria-current={selected ? "page" : undefined}
             className={cn(
-              "flex min-h-12 items-center justify-center gap-2 rounded-xl px-2 py-2 text-sm font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 sm:px-4",
+              "flex min-h-12 items-center justify-center gap-1.5 rounded-xl px-1.5 py-2 font-bold transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 sm:gap-2 sm:px-4",
+              seulSurSaRangee && "col-span-2 sm:col-span-1",
               selected
                 ? "bg-white text-brand-800 shadow-sm"
                 : "text-slate-600 hover:bg-white/70 hover:text-slate-950",
             )}
           >
             <Icon className="h-4 w-4 shrink-0" />
-            <span className="break-words text-center text-xs leading-tight sm:text-sm">
+            <span className="truncate text-center text-xs leading-tight sm:text-sm">
               {tab.label}
             </span>
             {"count" in tab && (
               <span
                 className={cn(
-                  "grid min-w-6 place-items-center rounded-md px-1.5 py-0.5 text-[11px]",
+                  "grid min-w-6 shrink-0 place-items-center rounded-md px-1.5 py-0.5 text-[11px]",
                   selected
                     ? "bg-brand-100 text-brand-800"
                     : "bg-white text-slate-500",
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index 72376d2..22d5dec 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -49,13 +49,13 @@ export async function SiteHeader() {
             <>
               <Link
                 href="/login"
-                className="hidden rounded-lg px-3 py-2 font-bold text-brand-950 transition-colors hover:bg-brand-50 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-200 sm:inline"
+                className="inline-flex min-h-10 items-center rounded-lg px-2.5 py-2 font-bold text-brand-950 transition-colors hover:bg-brand-50 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-200 sm:px-3"
               >
                 Connexion
               </Link>
               <Link
                 href="/register"
-                className="inline-flex min-h-10 items-center justify-center rounded-xl bg-brand-950 px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-brand-800 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-200"
+                className="inline-flex min-h-10 items-center justify-center whitespace-nowrap rounded-xl bg-brand-950 px-3 py-2 text-sm font-bold text-white transition-colors hover:bg-brand-800 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-200 sm:px-4"
               >
                 Créer un compte
               </Link>