From e2a0b6401d62d3fd1c49338f7b64825824064a0b Mon Sep 17 00:00:00 2001
From: pironantoine <57062554-pironantoine@users.noreply.replit.com>
Date: Sat, 4 Apr 2026 06:52:24 +0000
Subject: [PATCH] Reorganize front page to make synthesized text scrollable

Restructure the home page's right column to include a fixed header, a scrollable area for synthesized text with a fixed font size, and a fixed footer for metadata.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 923ae0e3-a363-4db8-b04a-e8baca2a1330
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c440572c-6e87-4d40-846d-c503ee9e862c
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8af7d2ec-2cc3-4ece-8af3-9f071488d072/923ae0e3-a363-4db8-b04a-e8baca2a1330/RusmVRz
Replit-Helium-Checkpoint-Created: true
---
 artifacts/voix-du-peuple/src/pages/home.tsx | 116 +++++++++-----------
 1 file changed, 53 insertions(+), 63 deletions(-)

diff --git a/artifacts/voix-du-peuple/src/pages/home.tsx b/artifacts/voix-du-peuple/src/pages/home.tsx
index 210d5f6..1e67f69 100644
--- a/artifacts/voix-du-peuple/src/pages/home.tsx
+++ b/artifacts/voix-du-peuple/src/pages/home.tsx
@@ -305,78 +305,68 @@ export default function Home() {
           }}
         />
 
-        <div className="p-6 md:p-12 flex-1 flex flex-col relative z-10 overflow-y-auto">
-          <div className="flex justify-between items-start mb-12">
-            <div>
-              <h2 className="text-sm font-mono font-bold uppercase tracking-widest text-primary flex items-center gap-2">
-                <Users className="h-4 w-4" /> Synthèse des contributions
-              </h2>
-              <p className="text-xs font-mono text-muted-foreground mt-1">
-                Mise à jour à chaque nouvelle contribution
-              </p>
-            </div>
-
-            {stats && (
-              <div className="text-xs font-mono text-right" data-testid="text-stats">
-                <div className="flex flex-col">
-                  <span className="text-muted-foreground">Contributions intégrées</span>
-                  <span className="font-bold text-primary">{stats.accepted}</span>
-                </div>
-              </div>
-            )}
+        {/* En-tête fixe */}
+        <div className="flex justify-between items-start px-6 md:px-10 py-5 border-b border-border/30 relative z-10 flex-shrink-0">
+          <div>
+            <h2 className="text-xs font-mono font-bold uppercase tracking-widest text-primary flex items-center gap-2">
+              <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
+            </p>
           </div>
+          {stats && (
+            <div className="text-xs font-mono text-right" data-testid="text-stats">
+              <span className="text-muted-foreground">Contributions intégrées </span>
+              <span className="font-bold text-primary">{stats.accepted}</span>
+            </div>
+          )}
+        </div>
 
-          <div className="flex-1 flex flex-col justify-center max-w-2xl mx-auto w-full">
+        {/* Texte défilable */}
+        <ScrollArea className="flex-1 relative z-10">
+          <div className="px-6 md:px-10 py-8">
             {isLoadingSynthesis ? (
-              <div className="flex flex-col items-center justify-center gap-4 text-muted-foreground">
-                <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                <span className="font-mono text-sm uppercase tracking-widest">
-                  Chargement…
-                </span>
+              <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
+                <Loader2 className="h-6 w-6 animate-spin text-primary" />
+                <span className="font-mono text-xs uppercase tracking-widest">Chargement…</span>
+              </div>
+            ) : synthesis?.text ? (
+              <div
+                className="animate-in fade-in slide-in-from-bottom-2 duration-700 ease-out text-sm md:text-base leading-relaxed text-foreground space-y-4 whitespace-pre-line"
+                data-testid="text-synthesis-content"
+              >
+                {synthesis.text}
               </div>
             ) : synthesis ? (
-              <div className="animate-in fade-in slide-in-from-bottom-4 duration-1000 ease-out space-y-8">
-                <div
-                  className="prose prose-lg prose-slate max-w-none text-2xl md:text-3xl lg:text-4xl leading-tight font-serif text-foreground"
-                  data-testid="text-synthesis-content"
-                >
-                  {synthesis.text ? (
-                    <div>{synthesis.text}</div>
-                  ) : (
-                    <p className="text-muted-foreground italic text-center text-xl">
-                      Aucune contribution pour l'instant.
-                    </p>
-                  )}
-                </div>
-
-                {synthesis.updatedAt && (
-                  <div
-                    className="pt-8 border-t border-border/40 mt-12 flex justify-between items-center text-xs font-mono text-muted-foreground"
-                    data-testid="text-synthesis-meta"
-                  >
-                    <span>
-                      Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}
-                    </span>
-                    <span className="flex items-center gap-2">
-                      <span className="relative flex h-2 w-2">
-                        <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
-                        <span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
-                      </span>
-                      Mis à jour le {format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
-                    </span>
-                  </div>
-                )}
-              </div>
+              <p className="text-muted-foreground italic text-sm py-16 text-center">
+                Aucune contribution pour l'instant.
+              </p>
             ) : (
-              <div className="flex flex-col items-center justify-center gap-4 text-muted-foreground">
-                <AlertCircle className="h-8 w-8 text-destructive" />
-                <span className="font-mono text-sm uppercase tracking-widest">
-                  Impossible de récupérer le manifeste
-                </span>
+              <div className="flex flex-col items-center justify-center gap-3 py-16 text-muted-foreground">
+                <AlertCircle className="h-6 w-6 text-destructive" />
+                <span className="font-mono text-xs uppercase tracking-widest">Impossible de récupérer la synthèse</span>
               </div>
             )}
           </div>
-        </div>
+        </ScrollArea>
+
+        {/* Pied de page fixe */}
+        {synthesis?.updatedAt && (
+          <div
+            className="flex justify-between items-center px-6 md:px-10 py-3 border-t border-border/30 text-xs font-mono text-muted-foreground relative z-10 flex-shrink-0"
+            data-testid="text-synthesis-meta"
+          >
+            <span>Basé sur {synthesis.ideaCount} contribution{synthesis.ideaCount !== 1 ? "s" : ""}</span>
+            <span className="flex items-center gap-1.5">
+              <span className="relative flex h-1.5 w-1.5">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
+                <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-primary" />
+              </span>
+              {format(new Date(synthesis.updatedAt), "d MMM à HH:mm", { locale: fr })}
+            </span>
+          </div>
+        )}
       </div>
     </div>
     </>