Fix Reports mobile layout overflow and desktop date range overflow

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>

CHANGELOG.md

@@ -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

@@ -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

@@ -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>