From 62cc998f3b0ee82dec568c74d434c65567eb2bc5 Mon Sep 17 00:00:00 2001
From: lowcarbdev <lowcarbdev@users.noreply.github.com>
Date: Sat, 22 Nov 2025 16:18:47 -0700
Subject: [PATCH] image preview tweaks on mobile

---
 frontend/src/App.jsx                  |  2 +-
 frontend/src/components/LazyMedia.jsx | 33 +++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index dbd6596..0bce878 100644
--- a/frontend/src/App.jsx
+++ b/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}
diff --git a/frontend/src/components/LazyMedia.jsx b/frontend/src/components/LazyMedia.jsx
index 612198c..56680fa 100644
--- a/frontend/src/components/LazyMedia.jsx
+++ b/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])