From b6471de51b0d0af61bfbf98efaabfa55f897de32 Mon Sep 17 00:00:00 2001
From: billisdead <billisdead@tutanota.com>
Date: Tue, 23 Jun 2026 16:53:15 +0200
Subject: [PATCH] Improve mobile responsiveness on home page and navbar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Navbar: hide Fonctionnement and Flyer QR on mobile (hidden sm:inline),
  preventing overflow on small screens
- Home: add mobile tab bar (Proposer / Synthèse) replacing the broken
  two-column stacked layout that was constrained to h-[calc(100vh-5rem)]
- Grid: md:h-[calc(100vh-9rem)] (desktop only); columns show/hide via
  mobileTab state
- Countdown: visible in synthesis tab label on mobile, in header on md+
- Textarea: 90px min-height on mobile, 120px on sm+

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 artifacts/voix-du-peuple/src/App.tsx        |  6 ++---
 artifacts/voix-du-peuple/src/pages/home.tsx | 29 +++++++++++++++++----
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/artifacts/voix-du-peuple/src/App.tsx b/artifacts/voix-du-peuple/src/App.tsx
index cdb0452..fb0f1e9 100644
--- a/artifacts/voix-du-peuple/src/App.tsx
+++ b/artifacts/voix-du-peuple/src/App.tsx
@@ -36,11 +36,11 @@ function Navbar() {
         <Link href="/" className="flex items-center gap-2 mr-6 font-serif text-xl font-bold tracking-tight text-primary" data-testid="nav-home-link">
           La Voix du Peuple
         </Link>
-        <nav className="flex items-center gap-6 text-sm font-medium" aria-label="Navigation principale">
+        <nav className="flex items-center gap-4 text-sm font-medium" aria-label="Navigation principale">
           <Link href="/" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-manifesto-link">Manifeste</Link>
           <Link href="/about" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-about-link">À propos</Link>
-          <Link href="/transparence" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-transparence-link">Fonctionnement</Link>
-          <Link href="/flyer" className="transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-flyer-link">Flyer QR</Link>
+          <Link href="/transparence" className="hidden sm:inline transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-transparence-link">Fonctionnement</Link>
+          <Link href="/flyer" className="hidden sm:inline transition-colors hover:text-foreground/80 text-foreground/60" data-testid="nav-flyer-link">Flyer QR</Link>
         </nav>
         <div className="ml-auto flex items-center gap-2">
           <AccessibilityPanel />
diff --git a/artifacts/voix-du-peuple/src/pages/home.tsx b/artifacts/voix-du-peuple/src/pages/home.tsx
index 21ce353..912626f 100644
--- a/artifacts/voix-du-peuple/src/pages/home.tsx
+++ b/artifacts/voix-du-peuple/src/pages/home.tsx
@@ -142,6 +142,8 @@ export default function Home() {
     return () => clearTimeout(t);
   }, [countdown]);
 
+  const [mobileTab, setMobileTab] = React.useState<"proposer" | "synthese">("proposer");
+
   // Soumission effective après confirmation du consentement (ou si déjà consenti)
   const doActualSubmit = (data: SubmitIdeaValues) => {
     if (captchaToken) {
@@ -320,9 +322,25 @@ export default function Home() {
       </div>
     </div>
 
-    <div className="flex-1 grid md:grid-cols-2 lg:grid-cols-[1fr_1.2fr] h-[calc(100vh-5rem)]">
+    {/* Onglets mobile — masqués sur md+ */}
+    <div className="md:hidden flex flex-shrink-0 border-b border-border/40 text-xs font-mono uppercase tracking-widest">
+      <button
+        className={`flex-1 py-3 transition-colors ${mobileTab === "proposer" ? "border-b-2 border-primary text-primary bg-card font-bold" : "text-muted-foreground bg-background"}`}
+        onClick={() => setMobileTab("proposer")}
+      >
+        Proposer
+      </button>
+      <button
+        className={`flex-1 py-3 transition-colors flex items-center justify-center gap-1.5 ${mobileTab === "synthese" ? "border-b-2 border-primary text-primary bg-[#F9F7F1] font-bold" : "text-muted-foreground bg-background"}`}
+        onClick={() => setMobileTab("synthese")}
+      >
+        Synthèse <span className="font-mono opacity-60">{countdown}s</span>
+      </button>
+    </div>
+
+    <div className="flex-1 grid min-h-0 md:grid-cols-2 lg:grid-cols-[1fr_1.2fr] md:h-[calc(100vh-9rem)]">
       {/* Colonne gauche : formulaire + fil des idées */}
-      <div className="flex flex-col border-r border-border/40 bg-card">
+      <div className={`flex flex-col border-r border-border/40 bg-card md:flex ${mobileTab === "proposer" ? "" : "hidden"}`}>
         <div className="p-6 md:p-8 flex flex-col gap-6 flex-shrink-0 border-b border-border/40">
           <div className="space-y-2">
             <h1 className="text-3xl font-serif font-bold text-primary tracking-tight">
@@ -355,7 +373,7 @@ export default function Home() {
                     <FormControl>
                       <Textarea
                         placeholder="Quelle proposition souhaitez-vous faire remonter ?"
-                        className="min-h-[120px] resize-none font-serif text-lg bg-background border-primary/20 focus-visible:ring-primary placeholder:text-muted-foreground/50"
+                        className="min-h-[90px] sm:min-h-[120px] resize-none font-serif text-lg bg-background border-primary/20 focus-visible:ring-primary placeholder:text-muted-foreground/50"
                         data-testid="input-idea-content"
                         {...field}
                       />
@@ -537,7 +555,7 @@ export default function Home() {
       </div>
 
       {/* Colonne droite : synthèse vivante */}
-      <div className="flex flex-col bg-[#F9F7F1] relative overflow-hidden">
+      <div className={`flex flex-col bg-[#F9F7F1] relative overflow-hidden md:flex ${mobileTab === "synthese" ? "" : "hidden"}`}>
         <div
           className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-multiply"
           style={{
@@ -552,7 +570,8 @@ export default function Home() {
               <Users className="h-3.5 w-3.5" /> Synthèse des contributions
             </h2>
             <p className="text-xs text-muted-foreground mt-0.5">
-              Mise à jour à chaque nouvelle contribution · <span className="font-mono">{countdown}s</span>
+              Mise à jour à chaque nouvelle contribution
+              <span className="hidden md:inline font-mono"> · {countdown}s</span>
             </p>
           </div>
           <div className="flex items-center gap-2 flex-shrink-0">