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