blomios/Tradarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix popup size and position for mobile

Browse Source
This commit is contained in:
Blomios
2026-04-21 18:54:29 +02:00
parent f2bb88f040
commit 9780311cd0
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/layout/MobileNav.tsx
View File

@ -1,11 +1,12 @@
import { NavLink } from 'react-router-dom' 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' import { cn } from '@/lib/cn'
const items = [ const items = [
{ to: '/', icon: LayoutDashboard, label: 'Dashboard' }, { to: '/', icon: LayoutDashboard, label: 'Dashboard' },
{ to: '/feed', icon: Newspaper, label: 'Actus' }, { to: '/feed', icon: Newspaper, label: 'Actus' },
{ to: '/watchlist', icon: Star, label: 'Watchlist' }, { to: '/watchlist', icon: Star, label: 'Watchlist' },
{ to: '/reports', icon: FileText, label: 'Rapports' },
{ to: '/admin', icon: Settings, label: 'Admin' }, { to: '/admin', icon: Settings, label: 'Admin' },
] ]

43
frontend/src/pages/Dashboard.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from 'react' 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 { summariesApi, type Summary } from '@/api/summaries'
import { reportsApi } from '@/api/reports' import { reportsApi } from '@/api/reports'
import { assetsApi, type Asset } from '@/api/assets' import { assetsApi, type Asset } from '@/api/assets'
@ -68,6 +68,7 @@ function ContextPanel({
const [question, setQuestion] = useState('') const [question, setQuestion] = useState('')
const [submitting, setSubmitting] = useState(false) const [submitting, setSubmitting] = useState(false)
const [submitted, setSubmitted] = useState(false) const [submitted, setSubmitted] = useState(false)
const [showExcerpts, setShowExcerpts] = useState(false)
async function submit() { async function submit() {
if (!question.trim() || submitting) return if (!question.trim() || submitting) return
@ -83,34 +84,38 @@ function ContextPanel({
} }
return ( 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 */} {/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b bg-primary/5"> <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" /> <MessageSquarePlus className="h-4 w-4 text-primary" />
Contexte ({excerpts.length} extrait{excerpts.length > 1 ? 's' : ''}) 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"> <button onClick={onClear} className="text-xs text-muted-foreground hover:text-destructive transition-colors">
Tout effacer Tout effacer
</button> </button>
</div> </div>
{/* Extraits */} {/* 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"> <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) => ( {excerpts.map((e, i) => (
<div key={i} className="flex items-start gap-2 group"> <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"> <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;» «&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> </div>
<button ))}
onClick={() => onRemove(i)} </div>
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>
{/* Question */} {/* Question */}
<div className="border-t px-4 py-3 space-y-2"> <div className="border-t px-4 py-3 space-y-2">