image preview tweaks on mobile

frontend/src/App.jsx

@@ -255,7 +255,7 @@ function App() {
       </div>
 
       {/* Date Filter */}
-      <div className="bg-white border-bottom shadow-sm" style={{zIndex: 1025, position: 'relative'}}>
+      <div className="date-filter-container bg-white border-bottom shadow-sm" style={{zIndex: 1025, position: 'relative'}}>
         <DateFilter
           startDate={startDate}
           endDate={endDate}

frontend/src/components/LazyMedia.jsx

@@ -108,11 +108,44 @@ function LazyMedia({ messageId, mediaType, className, alt = "MMS attachment" })
       document.addEventListener('keydown', handleEscape)
       // Prevent body scroll when modal is open
       document.body.style.overflow = 'hidden'
+
+      // Hide UI elements that might appear over the full-screen modal
+      const datePickers = document.querySelectorAll('.react-datepicker-popper')
+      datePickers.forEach(picker => {
+        picker.style.display = 'none'
+      })
+
+      const dateFilterContainer = document.querySelector('.date-filter-container')
+      if (dateFilterContainer) {
+        dateFilterContainer.style.visibility = 'hidden'
+      }
+
+      // Hide the page header
+      const header = document.querySelector('header')
+      if (header) {
+        header.style.visibility = 'hidden'
+      }
     }
 
     return () => {
       document.removeEventListener('keydown', handleEscape)
       document.body.style.overflow = 'unset'
+
+      // Restore visibility of hidden elements
+      const datePickers = document.querySelectorAll('.react-datepicker-popper')
+      datePickers.forEach(picker => {
+        picker.style.display = ''
+      })
+
+      const dateFilterContainer = document.querySelector('.date-filter-container')
+      if (dateFilterContainer) {
+        dateFilterContainer.style.visibility = ''
+      }
+
+      const header = document.querySelector('header')
+      if (header) {
+        header.style.visibility = ''
+      }
     }
   }, [showModal])