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;
 }