Mobile improvements

frontend/src/App.css

@@ -79,7 +79,7 @@ body {
   padding: 10px;
   border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .form-group input:focus,
@@ -185,6 +185,70 @@ body {
   margin-top: 20px;
 }
 
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+  
+  .container {
+    padding: 10px;
+  }
+  
+  .card {
+    padding: 16px;
+  }
+  
+  .navbar {
+    padding: 12px 16px;
+  }
+  
+  .navbar h1 {
+    font-size: 18px;
+  }
+  
+  /* Make tables responsive */
+  table {
+    width: 100%;
+    min-width: 600px; /* Ensure minimum width for readability */
+  }
+  
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Auth pages mobile adjustments */
+  .auth-container {
+    flex-direction: column;
+    padding: 20px;
+    gap: 20px;
+  }
+  
+  .auth-card {
+    max-width: 100%;
+    padding: 24px;
+  }
+  
+  /* Welcome section mobile adjustments */
+  .welcome-section {
+    max-width: 100% !important;
+    padding: 20px !important;
+  }
+  
+  .welcome-section h1 {
+    font-size: 1.8rem !important;
+  }
+  
+  /* Form grid mobile adjustments */
+  @media (max-width: 768px) {
+    form[style*="grid-template-columns"] {
+      grid-template-columns: 1fr !important;
+      gap: 16px !important;
+    }
+  }
+}
+
 .status-badge {
   display: inline-block;
   padding: 4px 12px;
@@ -255,7 +319,7 @@ body {
   padding: 8px;
   border: 1px solid #ddd;
   border-radius: 4px;
-  font-size: 14px;
+  font-size: 16px;
   color: #333;
   background-color: #fff;
 }

frontend/src/pages/Dashboard.tsx

@@ -301,6 +301,7 @@ const Dashboard: React.FC = () => {
         <div className="card" style={{ marginTop: '20px' }}>
           <h3 style={{ marginBottom: '16px' }}>Payment History</h3>
           {payments.length > 0 ? (
+            <div className="table-container">
               <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                 <thead>
                   <tr style={{ borderBottom: '2px solid #ddd' }}>
@@ -325,6 +326,7 @@ const Dashboard: React.FC = () => {
                   ))}
                 </tbody>
               </table>
+            </div>
           ) : (
             <p style={{ color: '#666' }}>No payment history available.</p>
           )}
@@ -339,6 +341,7 @@ const Dashboard: React.FC = () => {
             {allPayments.filter(p => p.status === 'pending').length > 0 && (
               <div style={{ marginBottom: '20px' }}>
                 <h4 style={{ marginBottom: '12px' }}>Pending Payments</h4>
+                <div className="table-container">
                   <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                     <thead>
                       <tr style={{ borderBottom: '2px solid #ddd' }}>
@@ -375,12 +378,14 @@ const Dashboard: React.FC = () => {
                     </tbody>
                   </table>
                 </div>
+              </div>
             )}
 
             {/* Pending Memberships */}
             {allMemberships.filter(m => m.status === 'pending').length > 0 && (
               <div>
                 <h4 style={{ marginBottom: '12px' }}>Pending Memberships</h4>
+                <div className="table-container">
                   <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                     <thead>
                       <tr style={{ borderBottom: '2px solid #ddd' }}>
@@ -406,6 +411,7 @@ const Dashboard: React.FC = () => {
                     </tbody>
                   </table>
                 </div>
+              </div>
             )}
 
             {allPayments.filter(p => p.status === 'pending').length === 0 && 
@@ -437,6 +443,7 @@ const Dashboard: React.FC = () => {
               />
             </div>
             
+            <div className="table-container">
               <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                 <thead>
                   <tr style={{ borderBottom: '2px solid #ddd' }}>
@@ -510,6 +517,7 @@ const Dashboard: React.FC = () => {
                 </tbody>
               </table>
             </div>
+          </div>
         )}
       </div>
 

frontend/src/pages/Login.tsx

@@ -43,7 +43,7 @@ const Login: React.FC = () => {
   };
 
   return (
-    <div className="auth-container" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '40px', padding: '20px' }}>
+    <div className="auth-container" style={{ gap: '40px', padding: '20px' }}>
       <div className="welcome-section" style={{
         flex: '1',
         maxWidth: '400px',