From 9780311cd01c94afccd80eb2f6b71ca3dedbc4ed Mon Sep 17 00:00:00 2001
From: Blomios <blomios@gmail.com>
Date: Tue, 21 Apr 2026 18:54:29 +0200
Subject: [PATCH] fix: fix popup size and position for mobile

---
 frontend/src/components/layout/MobileNav.tsx |  3 +-
 frontend/src/pages/Dashboard.tsx             | 43 +++++++++++---------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/layout/MobileNav.tsx b/frontend/src/components/layout/MobileNav.tsx
index d11450d..e615538 100644
--- a/frontend/src/components/layout/MobileNav.tsx
+++ b/frontend/src/components/layout/MobileNav.tsx
@@ -1,11 +1,12 @@
 import { NavLink } from 'react-router-dom'
-import { LayoutDashboard, Newspaper, Star, Settings } from 'lucide-react'
+import { LayoutDashboard, Newspaper, Star, Settings, FileText } from 'lucide-react'
 import { cn } from '@/lib/cn'
 
 const items = [
   { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
   { to: '/feed', icon: Newspaper, label: 'Actus' },
   { to: '/watchlist', icon: Star, label: 'Watchlist' },
+  { to: '/reports', icon: FileText, label: 'Rapports' },
   { to: '/admin', icon: Settings, label: 'Admin' },
 ]
 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 0281078..1f9bd51 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { TrendingUp, Clock, Sparkles, MessageSquarePlus, Loader2, Plus, X, Send } from 'lucide-react'
+import { TrendingUp, Clock, Sparkles, MessageSquarePlus, Loader2, Plus, X, Send, ChevronDown, ChevronUp } from 'lucide-react'
 import { summariesApi, type Summary } from '@/api/summaries'
 import { reportsApi } from '@/api/reports'
 import { assetsApi, type Asset } from '@/api/assets'
@@ -68,6 +68,7 @@ function ContextPanel({
   const [question, setQuestion] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [submitted, setSubmitted] = useState(false)
+  const [showExcerpts, setShowExcerpts] = useState(false)
 
   async function submit() {
     if (!question.trim() || submitting) return
@@ -83,34 +84,38 @@ function ContextPanel({
   }
 
   return (
-    <div className="fixed bottom-4 right-4 z-40 w-96 max-h-[70vh] flex flex-col bg-card border rounded-xl shadow-2xl overflow-hidden">
+    <div className="fixed bottom-16 left-0 right-0 z-40 flex flex-col bg-card border-t shadow-2xl overflow-hidden md:bottom-4 md:left-auto md:right-4 md:w-96 md:rounded-xl md:border">
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b bg-primary/5">
-        <span className="text-sm font-semibold flex items-center gap-2">
+        <button
+          className="text-sm font-semibold flex items-center gap-2 hover:text-primary transition-colors"
+          onClick={() => setShowExcerpts(v => !v)}
+        >
           <MessageSquarePlus className="h-4 w-4 text-primary" />
           Contexte ({excerpts.length} extrait{excerpts.length > 1 ? 's' : ''})
-        </span>
+          <span className="md:hidden">{showExcerpts ? <ChevronDown className="h-3 w-3" /> : <ChevronUp className="h-3 w-3" />}</span>
+        </button>
         <button onClick={onClear} className="text-xs text-muted-foreground hover:text-destructive transition-colors">
           Tout effacer
         </button>
       </div>
 
-      {/* Extraits */}
-      <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2 min-h-0">
-        {excerpts.map((e, i) => (
-          <div key={i} className="flex items-start gap-2 group">
-            <div className="flex-1 rounded bg-muted/60 px-2 py-1.5 text-xs text-muted-foreground italic line-clamp-3">
-              «&nbsp;{e}&nbsp;»
+      {/* Extraits — toujours visible sur desktop, togglable sur mobile */}
+      <div className={`flex-1 overflow-y-auto px-4 py-3 space-y-2 min-h-0 max-h-[25vh] ${showExcerpts ? 'block' : 'hidden'} md:block`}>
+          {excerpts.map((e, i) => (
+            <div key={i} className="flex items-start gap-2 group">
+              <div className="flex-1 rounded bg-muted/60 px-2 py-1.5 text-xs text-muted-foreground italic line-clamp-3">
+                «&nbsp;{e}&nbsp;»
+              </div>
+              <button
+                onClick={() => onRemove(i)}
+                className="mt-1 shrink-0 text-muted-foreground hover:text-destructive md:opacity-0 md:group-hover:opacity-100 transition-opacity"
+              >
+                <X className="h-3 w-3" />
+              </button>
             </div>
-            <button
-              onClick={() => onRemove(i)}
-              className="mt-1 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
-            >
-              <X className="h-3 w-3" />
-            </button>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
 
       {/* Question */}
       <div className="border-t px-4 py-3 space-y-2">