mobile view tweaks

2025-11-22 15:56:45 -07:00
parent f48353ff16
commit e38e8fd149
3 changed files with 27 additions and 32 deletions
@@ -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;
  }
 }
@@ -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}
@@ -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">