billisdead/la-voix-du-peuple
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile responsiveness on home page and navbar

Browse Source 
- 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>
This commit is contained in:
billisdead
2026-06-23 16:53:15 +02:00
parent f2d51fe21a
commit b6471de51b
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
artifacts/voix-du-peuple/src/App.tsx
+3 -3
View File
@@ -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 />