From fe7c603b4e73855147d47cdbfdd52caaec69b987 Mon Sep 17 00:00:00 2001
From: Antigravity Agent <antigravity@gemini.google.com>
Date: Wed, 4 Feb 2026 19:53:04 +0100
Subject: [PATCH] fix(ui): prevent duplicate hero images and fix text overflow
 in reader view

---
 web/src/components/ReaderView.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ReaderView.tsx b/web/src/components/ReaderView.tsx
index fa22445..a0ed140 100644
--- a/web/src/components/ReaderView.tsx
+++ b/web/src/components/ReaderView.tsx
@@ -8,7 +8,14 @@ interface ReaderViewProps {
 
 export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewProps) {
     // Determine content to show: full content > summary > default message
-    const displayContent = article.content || article.summary || '<p class="italic text-paper-muted">Aucun contenu disponible pour cet article.</p>';
+    let displayContent = article.content || article.summary || '<p class="italic text-paper-muted">Aucun contenu disponible pour cet article.</p>';
+
+    // If we have a hero image, try to remove the first image from the content to avoid duplicates
+    if (article.image_url) {
+        // Simple regex to remove the first img tag if it exists at the start of the content
+        // This is a heuristic and might need refinement, but handles the "duplicate" complaint common in RSS
+        displayContent = displayContent.replace(/<img[^>]*>/, '');
+    }
 
     return (
         <div
@@ -92,7 +99,7 @@ export function ReaderView({ article, onClose, onToggleFavorite }: ReaderViewPro
                     </header>
 
                     <div
-                        className="magazine-content text-paper-white/90 text-xl font-reading leading-relaxed space-y-8 selection:bg-gold/20"
+                        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"
                         dangerouslySetInnerHTML={{ __html: displayContent }}
                     />