joshua/hope-events
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Reports mobile layout overflow and desktop date range overflow

Browse Source 
Report popup buttons and the page's search/Back controls overflowed
off-screen on mobile instead of wrapping, and the sidebar's custom
date range inputs spilled outside the filter box on desktop.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
joshua
2026-08-05 14:57:09 +02:00
co-authored by Claude Sonnet 5
parent d6ea4c37d7
commit 424141f216
3 changed files with 44 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+6
View File
@@ -7,6 +7,12 @@ and this project follows [Semantic Versioning](https://semver.org/).
## [Unreleased]
### Fixed
- Reports: on mobile, the report popup's close button now sits pinned beside the title instead of getting cut off inline with the Print/Email/Excel/WhatsApp buttons, which now have their own wrapping row below.
- Reports: on mobile, the page header's search box and Back button no longer run off-screen — they now sit on their own row and shrink to fit.
- Reports: the sidebar's custom date range inputs (From/To) are now stacked instead of side-by-side, fixing them overflowing outside the filter box on desktop.
## [1.4.0] - 2026-08-04
### Added
frontend/src/components/reports/ReportViewerModal.tsx
+23 -13
View File
@@ -22,24 +22,34 @@ export default function ReportViewerModal({
<div className="absolute inset-0 bg-black/40" onClick={onClose} />
<div className="absolute inset-0 flex items-start justify-center p-4 overflow-auto">
<div className="w-full max-w-6xl bg-white rounded-xl shadow-xl my-8" onClick={e => e.stopPropagation()}>
<div className="flex items-start justify-between gap-4 px-5 py-4 border-b">
<div className="flex items-start gap-3 min-w-0">
{Icon && (
<div className="w-11 h-11 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
<Icon className="w-5 h-5 text-indigo-600" />
<div className="border-b">
<div className="flex items-start justify-between gap-3 sm:gap-4 px-5 pt-4 pb-4">
<div className="flex items-start gap-3 min-w-0">
{Icon && (
<div className="w-11 h-11 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
<Icon className="w-5 h-5 text-indigo-600" />
</div>
)}
<div className="min-w-0">
<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
{description && <p className="text-sm text-gray-500 mt-0.5">{description}</p>}
</div>
)}
<div className="min-w-0">
<h2 className="text-lg font-semibold text-gray-900">{title}</h2>
{description && <p className="text-sm text-gray-500 mt-0.5">{description}</p>}
</div>
</div>
<div className="flex items-center gap-2 shrink-0">
{actions}
<button className="p-2 rounded-lg hover:bg-gray-100 ml-1" onClick={onClose} aria-label="Close">
<div className="hidden sm:flex items-center gap-2 flex-wrap shrink-0 ml-auto">
{actions}
<button className="p-2 rounded-lg hover:bg-gray-100 ml-1" onClick={onClose} aria-label="Close">
<X className="w-5 h-5 text-gray-500" />
</button>
</div>
<button className="sm:hidden p-2 rounded-lg hover:bg-gray-100 shrink-0" onClick={onClose} aria-label="Close">
<X className="w-5 h-5 text-gray-500" />
</button>
</div>
{actions && (
<div className="flex sm:hidden items-center gap-2 flex-wrap px-5 pb-4">
{actions}
</div>
)}
</div>
<div className="flex flex-wrap items-center justify-between gap-3 px-5 py-3 border-b bg-indigo-50/50">
frontend/src/components/reports/ReportsShell.tsx
+15 -9
View File
@@ -67,23 +67,23 @@ export default function ReportsShell({
return (
<div>
<div className="flex items-start justify-between gap-4 mb-6">
<div>
<div className="flex flex-wrap items-start justify-between gap-3 sm:gap-4 mb-6">
<div className="min-w-0">
<h1 className="text-2xl font-semibold text-gray-900">Reports</h1>
<p className="text-sm text-gray-500 mt-0.5">View, export, or email operational reports for events.</p>
</div>
<div className="flex items-center gap-3">
<div className="relative">
<div className="flex items-center gap-3 w-full sm:w-auto">
<div className="relative flex-1 min-w-0 sm:flex-none">
<Search className="w-4 h-4 absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
<input
className="w-56 border rounded-lg pl-8 pr-3 py-2 text-sm"
className="w-full sm:w-56 border rounded-lg pl-8 pr-3 py-2 text-sm"
placeholder="Search reports…"
value={search}
onChange={e => setSearch(e.target.value)}
/>
</div>
{onBack && (
<button type="button" className="flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={onBack}>
<button type="button" className="shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800" onClick={onBack}>
<ArrowLeft className="w-4 h-4" /> Back
</button>
)}
@@ -128,9 +128,15 @@ export default function ReportsShell({
<option value="custom">Custom</option>
</select>
{datePreset === "custom" && (
<div className="flex gap-2">
<input type="date" className="w-full border rounded px-2 py-1.5 text-sm" value={dateFrom} onChange={e => setDateFrom(e.target.value)} />
<input type="date" className="w-full border rounded px-2 py-1.5 text-sm" value={dateTo} onChange={e => setDateTo(e.target.value)} />
<div className="space-y-2">
<div>
<div className="text-[11px] text-gray-500 mb-0.5">From</div>
<input type="date" className="w-full min-w-0 border rounded px-2 py-1.5 text-sm" value={dateFrom} onChange={e => setDateFrom(e.target.value)} />
</div>
<div>
<div className="text-[11px] text-gray-500 mb-0.5">To</div>
<input type="date" className="w-full min-w-0 border rounded px-2 py-1.5 text-sm" value={dateTo} onChange={e => setDateTo(e.target.value)} />
</div>
</div>
)}
</div>