From c542c9aebbbd4cce32f64be8828b82f8d9edca19 Mon Sep 17 00:00:00 2001
From: lowcarbdev <lowcarbdev@users.noreply.github.com>
Date: Sat, 22 Nov 2025 22:35:37 -0700
Subject: [PATCH] more mobile fixes with direct linking and others

---
 frontend/src/App.css                   | 26 +++++++++++++++++++++++++
 frontend/src/App.jsx                   | 18 +++++++++--------
 frontend/src/components/DateFilter.jsx | 27 +++++++++++++-------------
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index a6c2803..b454ab1 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -92,3 +92,29 @@
     font-size: 1rem !important;
   }
 }
+
+/* Date picker input sizing */
+.date-picker-input {
+  width: 100%;
+  min-width: 0;
+  font-size: 0.875rem;
+}
+
+/* Date picker wrapper - responsive behavior */
+.date-picker-wrapper {
+  flex-shrink: 0;
+}
+
+/* Mobile date picker - more compact and flexible */
+@media (max-width: 767.98px) {
+  .date-picker-wrapper {
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-width: 0;
+  }
+
+  .date-picker-input {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
+  }
+}
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 142eb8f..fa5d29b 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -82,6 +82,8 @@ function App() {
         // If conversation not found in list, create a minimal conversation object
         setSelectedConversation({ address, contact_name: address, type: 'message' })
       }
+      // Hide sidebar on mobile when viewing a conversation (from direct link or navigation)
+      setShowSidebar(false)
     } else {
       // Not viewing a specific conversation
       setSelectedConversation(null)
@@ -223,10 +225,10 @@ function App() {
                 className={`nav-link ${activeView === 'conversations' ? 'active' : ''}`}
                 onClick={() => handleViewChange('conversations')}
               >
-                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
                 </svg>
-                Conversations
+                <span className="d-none d-sm-inline">Conversations</span>
               </button>
             </li>
             <li className="nav-item">
@@ -234,10 +236,10 @@ function App() {
                 className={`nav-link ${activeView === 'calls' ? 'active' : ''}`}
                 onClick={() => handleViewChange('calls')}
               >
-                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                 </svg>
-                Calls
+                <span className="d-none d-sm-inline">Calls</span>
               </button>
             </li>
             <li className="nav-item">
@@ -245,10 +247,10 @@ function App() {
                 className={`nav-link ${activeView === 'search' ? 'active' : ''}`}
                 onClick={() => handleViewChange('search')}
               >
-                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                 </svg>
-                Search
+                <span className="d-none d-sm-inline">Search</span>
               </button>
             </li>
             <li className="nav-item">
@@ -256,10 +258,10 @@ function App() {
                 className={`nav-link ${activeView === 'activity' ? 'active' : ''}`}
                 onClick={() => handleViewChange('activity')}
               >
-                <svg style={{width: '1rem', height: '1rem'}} className="me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                 </svg>
-                Activity
+                <span className="d-none d-sm-inline">Activity</span>
               </button>
             </li>
           </ul>
diff --git a/frontend/src/components/DateFilter.jsx b/frontend/src/components/DateFilter.jsx
index 8a93f91..0c4b61e 100644
--- a/frontend/src/components/DateFilter.jsx
+++ b/frontend/src/components/DateFilter.jsx
@@ -9,12 +9,13 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
 
   return (
     <div className="px-2 py-1 bg-light">
-      <div className="d-flex align-items-center gap-2 flex-wrap small">
-        <div className="d-flex align-items-center gap-1">
-          <svg style={{width: '1rem', height: '1rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-          <label className="fw-semibold mb-0">From:</label>
+      <div className="d-flex align-items-center gap-1 gap-sm-2 small">
+        <svg style={{width: '1rem', height: '1rem'}} className="text-primary flex-shrink-0 d-none d-sm-block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+        </svg>
+
+        <div className="d-flex align-items-center gap-1 date-picker-wrapper">
+          <label className="fw-semibold mb-0 flex-shrink-0 small">From:</label>
           <DatePicker
             selected={startDate}
             onChange={onStartDateChange}
@@ -24,13 +25,13 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
             minDate={minDate}
             maxDate={maxDate}
             dateFormat="MMM d, yyyy"
-            className="form-control form-control-sm"
-            placeholderText="Start date"
+            className="form-control form-control-sm date-picker-input"
+            placeholderText="Start"
           />
         </div>
 
-        <div className="d-flex align-items-center gap-1">
-          <label className="fw-semibold mb-0">To:</label>
+        <div className="d-flex align-items-center gap-1 date-picker-wrapper">
+          <label className="fw-semibold mb-0 flex-shrink-0 small">To:</label>
           <DatePicker
             selected={endDate}
             onChange={onEndDateChange}
@@ -40,15 +41,15 @@ function DateFilter({ startDate, endDate, minDate, maxDate, onStartDateChange, o
             minDate={startDate || minDate}
             maxDate={maxDate}
             dateFormat="MMM d, yyyy"
-            className="form-control form-control-sm"
-            placeholderText="End date"
+            className="form-control form-control-sm date-picker-input"
+            placeholderText="End"
           />
         </div>
 
         {(startDate || endDate) && (
           <button
             onClick={clearDates}
-            className="btn btn-sm btn-outline-primary d-flex align-items-center gap-1"
+            className="btn btn-sm btn-outline-primary d-flex align-items-center gap-1 flex-shrink-0"
           >
             <svg style={{width: '0.875rem', height: '0.875rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />