From e38e8fd149ad58e0cf9a971e8f44da85c69ff03f Mon Sep 17 00:00:00 2001
From: lowcarbdev <lowcarbdev@users.noreply.github.com>
Date: Sat, 22 Nov 2025 15:56:45 -0700
Subject: [PATCH] mobile view tweaks

---
 frontend/src/App.css                      | 15 +++++++++++---
 frontend/src/App.jsx                      | 24 +++++------------------
 frontend/src/components/MessageThread.jsx | 20 +++++++++----------
 3 files changed, 27 insertions(+), 32 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 95de93f..a6c2803 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -60,7 +60,7 @@
     max-width: 100%;
     min-width: 100%;
     height: 100%;
-    z-index: 1000;
+    z-index: 1020;
     transform: translateX(-100%);
   }
 
@@ -70,6 +70,8 @@
 
   .message-thread-container {
     width: 100%;
+    position: relative;
+    z-index: 1010;
   }
 }
 
@@ -79,7 +81,14 @@
     transform: translateX(0) !important;
   }
 
-  .mobile-back-button {
-    display: none !important;
+  .thread-header-title {
+    font-size: 1.25rem !important;
+  }
+}
+
+/* Mobile - smaller thread header title */
+@media (max-width: 767.98px) {
+  .thread-header-title {
+    font-size: 1rem !important;
   }
 }
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 51f93e1..dbd6596 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -146,7 +146,7 @@ function App() {
   return (
     <div className="vh-100 d-flex flex-column bg-light">
       {/* Header */}
-      <header className="bg-primary bg-gradient text-white py-1 px-2 shadow">
+      <header className="bg-primary bg-gradient text-white py-1 px-2 shadow" style={{zIndex: 1030}}>
         <div className="d-flex justify-content-between align-items-center">
           <div className="d-flex align-items-center gap-2">
             <svg style={{width: '1.75rem', height: '1.75rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -155,9 +155,6 @@ function App() {
             <h1 className="h5 mb-0 fw-bold">SMS Backup Viewer</h1>
           </div>
           <div className="d-flex align-items-center gap-2">
-            <div className="text-end d-none d-md-block">
-              <div className="small fw-semibold">{user?.username}</div>
-            </div>
             <button
               onClick={() => setShowUpload(true)}
               className="btn btn-light btn-sm shadow-sm d-flex align-items-center gap-1"
@@ -179,6 +176,9 @@ function App() {
                 </svg>
               </Dropdown.Toggle>
               <Dropdown.Menu>
+                <Dropdown.ItemText className="fw-semibold">
+                  User: {user?.username}
+                </Dropdown.ItemText>
                 <Dropdown.ItemText className="small text-muted">
                   Version {__APP_VERSION__}
                 </Dropdown.ItemText>
@@ -255,7 +255,7 @@ function App() {
       </div>
 
       {/* Date Filter */}
-      <div className="bg-white border-bottom shadow-sm">
+      <div className="bg-white border-bottom shadow-sm" style={{zIndex: 1025, position: 'relative'}}>
         <DateFilter
           startDate={startDate}
           endDate={endDate}
@@ -306,20 +306,6 @@ function App() {
 
             {/* Message Thread */}
             <div className="flex-fill bg-white rounded-3 shadow overflow-hidden border message-thread-container" style={{minWidth: 0}}>
-              {/* Mobile back button */}
-              {selectedConversation && (
-                <div className="mobile-back-button bg-light border-bottom p-1 d-md-none">
-                  <button
-                    className="btn btn-sm btn-outline-primary d-flex align-items-center gap-1"
-                    onClick={() => setShowSidebar(true)}
-                  >
-                    <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="M15 19l-7-7 7-7" />
-                    </svg>
-                    Back
-                  </button>
-                </div>
-              )}
               <MessageThread
                 conversation={selectedConversation}
                 startDate={startDate}
diff --git a/frontend/src/components/MessageThread.jsx b/frontend/src/components/MessageThread.jsx
index f6e63b2..893910b 100644
--- a/frontend/src/components/MessageThread.jsx
+++ b/frontend/src/components/MessageThread.jsx
@@ -350,21 +350,21 @@ function MessageThread({ conversation, startDate, endDate }) {
   return (
     <div className="d-flex flex-column h-100">
       {/* Thread Header */}
-      <div className="bg-light border-bottom p-4 shadow-sm">
-        <div className="d-flex align-items-center gap-3">
-          <div className="p-3 rounded-circle bg-primary bg-gradient shadow">
+      <div className="bg-light border-bottom p-2 p-md-4 shadow-sm">
+        <div className="d-flex align-items-center gap-2 gap-md-3">
+          <div className="p-2 p-md-3 rounded-circle bg-primary bg-gradient shadow">
             {isCallLog ? (
-              <svg style={{width: '1.5rem', height: '1.5rem'}} className="text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg style={{width: '1.25rem', height: '1.25rem'}} className="text-white" 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>
             ) : (
-              <svg style={{width: '1.5rem', height: '1.5rem'}} className="text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <svg style={{width: '1.25rem', height: '1.25rem'}} className="text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
               </svg>
             )}
           </div>
-          <div>
-            <h2 className="h4 fw-bold mb-1">
+          <div className="flex-fill">
+            <h2 className="thread-header-title fw-bold mb-1">
               {getDisplayName(conversation)}
             </h2>
             {/* Display phone numbers for conversations with addresses */}
@@ -375,7 +375,7 @@ function MessageThread({ conversation, startDate, endDate }) {
                 ? firstItem.message.addresses
                 : firstItem.addresses
               return addresses && addresses.length > 0 && (
-                <div className="small text-muted mb-2">
+                <div className="small text-muted mb-1">
                   {addresses.map((addr, idx) => (
                     <span key={idx}>
                       {formatPhoneNumber(addr)}
@@ -386,7 +386,7 @@ function MessageThread({ conversation, startDate, endDate }) {
               )
             })()}
             <div>
-              <span className="badge bg-primary">
+              <span className="badge bg-primary" style={{fontSize: '0.7rem'}}>
                 {items.length} {isCallLog ? 'call' : 'message'}{items.length !== 1 ? 's' : ''}
               </span>
             </div>
@@ -395,7 +395,7 @@ function MessageThread({ conversation, startDate, endDate }) {
       </div>
 
       {/* Content */}
-      <div className="flex-fill overflow-auto p-4 bg-light">
+      <div className="flex-fill overflow-auto p-2 p-md-4 bg-light">
         {isCallLog ? (
           // Call Log View
           <div className="d-flex flex-column gap-3">