From b801b124357fd96de52c37f8a5f9d35d3a419ec2 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Sun, 16 Nov 2025 22:21:45 +0000
Subject: [PATCH] Put location and photo timestamp in same row for more compact
 layout

---
 src/components/report/ReportDetailModal.tsx | 43 +++++++++++----------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/components/report/ReportDetailModal.tsx b/src/components/report/ReportDetailModal.tsx
index a93833b..857d07b 100644
--- a/src/components/report/ReportDetailModal.tsx
+++ b/src/components/report/ReportDetailModal.tsx
@@ -185,18 +185,29 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
               </div>
             </div>
 
-            {/* Location */}
-            <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">
-                  {Number(report.latitude).toFixed(6)}, {Number(report.longitude).toFixed(6)}
-                </p>
-                <p className="text-xs text-gray-500">
-                  Source: {report.locationSource === 'exif' ? 'Photo EXIF data' : 
-                           report.locationSource === 'gps' ? 'Device GPS' : 'Manual selection'}
-                </p>
+            {/* Location and Photo Timestamp */}
+            <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-2">Location</p>
+                <div className="space-y-1">
+                  <p className="font-mono text-sm text-gray-900">
+                    {Number(report.latitude).toFixed(6)}, {Number(report.longitude).toFixed(6)}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    Source: {report.locationSource === 'exif' ? 'Photo EXIF data' : 
+                             report.locationSource === 'gps' ? 'Device GPS' : 'Manual selection'}
+                  </p>
+                </div>
               </div>
+
+              {report.photoTimestamp && (
+                <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')}
+                  </p>
+                </div>
+              )}
             </div>
 
             {/* Description */}
@@ -207,16 +218,6 @@ export function ReportDetailModal({ report, isOpen, onClose, onVerify, onDispute
               </div>
             )}
 
-            {/* Photo Timestamp */}
-            {report.photoTimestamp && (
-              <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')}
-                </p>
-              </div>
-            )}
-
             {/* Environmental Concerns */}
             {report.environmentalConcerns && report.environmentalConcerns.length > 0 && (
               <div className="border border-gray-200 rounded-lg p-3">