Improve mobile responsiveness on home page and navbar

- 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:
2026-06-23 16:53:15 +02:00
parent f2d51fe21a
commit b6471de51b
2 changed files with 27 additions and 8 deletions
+24 -5
View File
@@ -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">