Admin/ocean-cleanup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce ReportDetailModal size to minimize scrolling

Browse Source 
- Reduce max width from 4xl to 3xl
- Reduce photo height from h-96 to h-64
- Reduce padding throughout (p-6 to p-4, p-4 to p-3)
- Reduce header font size from 2xl to xl
- Reduce audit log max height from 60 to 40
- Reduce spacing between sections from space-y-6 to space-y-4
This commit is contained in:
Paul Bailey
2025-11-16 22:20:29 +00:00
parent 0099ea4b84
commit ff04e4fb47
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/report/ReportDetailModal.tsx
View File

@@ -110,7 +110,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Modal */}
<div className="flex min-h-full items-center justify-center p-4">
<div className="relative bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto z-[10000]">
<div className="relative bg-white rounded-lg shadow-xl max-w-3xl w-full max-h-[85vh] overflow-y-auto z-[10000]">
{/* Close Button */}
<button
onClick={onClose}
@@ -126,7 +126,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
<img
src={report.photoUrls[currentPhotoIndex]}
alt={`Report photo ${currentPhotoIndex + 1}`}
className="w-full h-96 object-contain"
className="w-full h-64 object-contain"
/>
{/* Photo Navigation */}
@@ -158,12 +158,12 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
</div>
{/* Content */}
<div className="p-6 space-y-6">
<div className="p-4 space-y-4">
{/* Header with Verification Status */}
<div className="flex items-start justify-between">
<div>
<h2 className="text-2xl font-bold text-gray-900">Litter Report</h2>
<p className="text-sm text-gray-500 mt-1">
<h2 className="text-xl font-bold text-gray-900">Litter Report</h2>
<p className="text-xs text-gray-500 mt-1">
Reported {format(new Date(report.createdAt), 'PPP')} at {format(new Date(report.createdAt), 'p')}
</p>
</div>
@@ -174,7 +174,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
</div>
{/* Reporter Info */}
<div className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
<div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
{report.user.avatarUrl ? (
<img
src={report.user.avatarUrl}
@@ -193,19 +193,19 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
</div>
{/* Litter Details */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="p-4 border border-gray-200 rounded-lg">
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-1">Litter Type</p>
<p className="font-semibold text-gray-900">{getLitterTypeLabel(report.litterType)}</p>
</div>
<div className="p-4 border border-gray-200 rounded-lg">
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-1">Quantity</p>
<p className="font-semibold text-gray-900">{getQuantityLabel(report.quantity)}</p>
</div>
</div>
{/* Location */}
<div className="p-4 border border-gray-200 rounded-lg">
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-2">Location</p>
<div className="space-y-1">
<p className="font-mono text-sm text-gray-900">
@@ -220,7 +220,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Description */}
{report.description && (
<div className="p-4 border border-gray-200 rounded-lg">
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-2">Description</p>
<p className="text-gray-900">{report.description}</p>
</div>
@@ -228,7 +228,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Photo Timestamp */}
{report.photoTimestamp && (
<div className="p-4 border border-gray-200 rounded-lg">
<div className="p-3 border border-gray-200 rounded-lg">
<p className="text-sm text-gray-500 mb-1">Photo Taken</p>
<p className="text-gray-900">
{format(new Date(report.photoTimestamp), 'PPP')} at {format(new Date(report.photoTimestamp), 'p')}
@@ -238,7 +238,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Environmental Concerns */}
{report.environmentalConcerns && report.environmentalConcerns.length > 0 && (
<div className="border border-gray-200 rounded-lg p-4">
<div className="border border-gray-200 rounded-lg p-3">
<p className="text-sm text-gray-500 mb-3">Environmental Concerns</p>
<div className="space-y-3">
{report.environmentalConcerns.map((concern) => (
@@ -265,7 +265,7 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
)}
{/* Verification Stats */}
<div className="border border-gray-200 rounded-lg p-4">
<div className="border border-gray-200 rounded-lg p-3">
<div className="flex items-center justify-between mb-3">
<h3 className="font-semibold text-gray-900">Verification Status</h3>
{report.verifications && report.verifications.length > 0 && (
@@ -322,10 +322,10 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Audit Log */}
{showAuditLog && report.verifications && report.verifications.length > 0 && (
<div className="mt-4 space-y-3">
<div className="border-t border-gray-200 pt-3">
<h4 className="text-sm font-medium text-gray-700 mb-3">Verification History</h4>
<div className="space-y-2 max-h-60 overflow-y-auto">
<div className="mt-3 space-y-2">
<div className="border-t border-gray-200 pt-2">
<h4 className="text-sm font-medium text-gray-700 mb-2">Verification History</h4>
<div className="space-y-2 max-h-40 overflow-y-auto">
{report.verifications
.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
.map((verification) => (
@@ -376,8 +376,8 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
{/* Action Buttons */}
{(onVerify || onDispute) && (
<div className="border-t border-gray-200 pt-6">
<p className="text-sm text-gray-700 mb-4">
<div className="border-t border-gray-200 pt-4">
<p className="text-sm text-gray-700 mb-3">
Help maintain data quality by verifying or disputing this report.
</p>