From b1459c171f6f9e7ac15c1ebfa06c1c4849148ed9 Mon Sep 17 00:00:00 2001
From: Antigravity Agent <antigravity@gemini.google.com>
Date: Wed, 4 Feb 2026 20:07:31 +0100
Subject: [PATCH] fix(ui): move article content between title and actions bar

---
 web/src/components/ReaderView.tsx | 70 +++++++++++++++----------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index a0ed140..a0d3faa 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -55,55 +55,55 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
                 )}
 
                 <div className={`p-8 md:p-20 ${!article.image_url ? 'pt-16' : 'pt-8'}`}>
-                    <header className="mb-16">
+                    <header className="mb-10">
                         <div className="flex items-center space-x-3 text-gold text-[10px] uppercase tracking-[0.4em] font-black mb-8">
                             <span className="bg-gold/10 px-2 py-1 rounded">{article.feed_title}</span>
                             <span className="opacity-30">•</span>
                             <span>{article.published_at ? new Date(article.published_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' }) : 'Aujourd\'hui'}</span>
                         </div>
 
-                        <h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] mb-10 italic-gold tracking-tight">
+                        <h1 className="text-4xl md:text-6xl font-serif text-paper-white leading-[1.15] italic-gold tracking-tight">
                             {article.title}
                         </h1>
-
-                        <div className="flex items-center justify-between py-8 border-y border-white/5">
-                            <div className="flex items-center space-x-6">
-                                <button
-                                    onClick={() => onToggleFavorite(article.id)}
-                                    className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
-                                        ? 'bg-gold text-carbon border-gold gold-glow'
-                                        : 'border-gold/20 text-gold hover:bg-gold/5'
-                                        }`}
-                                >
-                                    <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
-                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.382-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
-                                    </svg>
-                                    <span className="text-[10px] uppercase tracking-[0.2em] font-black">
-                                        {article.is_favorite ? 'Dans vos favoris' : 'Ajouter aux favoris'}
-                                    </span>
-                                </button>
-                            </div>
-
-                            <a
-                                href={article.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-gold transition-colors"
-                            >
-                                <span>Source d'origine</span>
-                                <svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
-                                </svg>
-                            </a>
-                        </div>
                     </header>
 
                     <div
-                        className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20 break-words overflow-x-hidden"
+                        className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20 break-words overflow-x-hidden mb-12"
                         dangerouslySetInnerHTML={{ __html: displayContent }}
                     />
 
-                    <footer className="mt-32 pt-16 border-t border-white/5 text-center pb-24">
+                    <div className="flex items-center justify-between py-8 border-y border-white/5 mb-16">
+                        <div className="flex items-center space-x-6">
+                            <button
+                                onClick={() => onToggleFavorite(article.id)}
+                                className={`flex items-center space-x-3 px-6 py-2.5 rounded-full border transition-all duration-500 ${article.is_favorite
+                                    ? 'bg-gold text-carbon border-gold gold-glow'
+                                    : 'border-gold/20 text-gold hover:bg-gold/5'
+                                    }`}
+                            >
+                                <svg className="w-4 h-4" fill={article.is_favorite ? "currentColor" : "none"} viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.382-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
+                                </svg>
+                                <span className="text-[10px] uppercase tracking-[0.2em] font-black">
+                                    {article.is_favorite ? 'Dans vos favoris' : 'Ajouter aux favoris'}
+                                </span>
+                            </button>
+                        </div>
+
+                        <a
+                            href={article.url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="group flex items-center space-x-2 text-[10px] uppercase tracking-[0.2em] font-black text-paper-muted hover:text-gold transition-colors"
+                        >
+                            <span>Source d'origine</span>
+                            <svg className="w-3 h-3 transform group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                            </svg>
+                        </a>
+                    </div>
+
+                    <footer className="text-center pb-24">
                         <div className="text-gold text-4xl font-serif mb-6 italic select-none">F.</div>
                         <p className="text-paper-muted/40 text-[10px] uppercase tracking-[0.4em] font-black">
                             FlowReader Lux Édition • 2026