Mobile desighn Adjustments

public/css/dashboard.css

@@ -656,30 +656,304 @@ body {
     background: #ef4444;
 }
 
+/* Mobile First Responsive Design */
 @media (max-width: 768px) {
-    .header {
+    .main-container {
         padding: 1rem;
-        flex-direction: column;
-        gap: 1rem;
+        max-width: 100%;
+    }
+
+    .main-title {
+        font-size: 2.5rem;
+        margin-bottom: 0.5rem;
+    }
+
+    .tagline {
+        font-size: 1rem;
     }
 
     .nav-buttons {
-        flex-wrap: wrap;
+        position: fixed;
+        top: 1rem;
+        right: 1rem;
+        left: 1rem;
+        flex-direction: column;
+        gap: 0.5rem;
+        background: rgba(15, 23, 42, 0.95);
+        backdrop-filter: blur(20px);
+        border: 1px solid #1e293b;
+        border-radius: 1rem;
+        padding: 1rem;
+        z-index: 1000;
+    }
+
+    .user-info {
+        order: -1;
+        margin-bottom: 0.5rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid #334155;
+        width: 100%;
         justify-content: center;
     }
 
-    .container {
-        padding: 0 1rem;
+    .btn {
+        width: 100%;
+        padding: 1rem;
+        font-size: 1rem;
+        text-align: center;
     }
 
     .dashboard-grid {
         grid-template-columns: 1fr;
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .card {
+        padding: 1.5rem;
+    }
+
+    .card h3 {
+        font-size: 1.1rem;
+    }
+
+    .welcome-card {
+        padding: 1.5rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .times-section {
+        padding: 1.5rem;
+        margin-top: 1.5rem;
+    }
+
+    .times-header h2 {
+        font-size: 1.5rem;
+    }
+
+    .times-header p {
+        font-size: 1rem;
+    }
+
+    .times-stats {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 1rem;
+        margin-bottom: 1.5rem;
+    }
+
+    .stat-card {
+        padding: 1rem;
+    }
+
+    .stat-number {
+        font-size: 1.5rem;
+    }
+
+    .stat-label {
+        font-size: 0.8rem;
+    }
+
+    .times-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+    }
+
+    .user-time-card {
+        padding: 1rem;
+    }
+
+    .time-value-large {
+        font-size: 1.5rem;
     }
 
     .modal-content {
-        margin: 2% auto;
+        margin: 1% auto;
         width: 95%;
-        padding: 1.5rem;
+        padding: 1rem;
+        max-height: 90vh;
+        overflow-y: auto;
+    }
+
+    .modal-title {
+        font-size: 1.2rem;
+    }
+
+    .form-input {
+        padding: 1rem;
+        font-size: 1rem;
+    }
+
+    .player-selection {
+        max-height: 150px;
+    }
+
+    .player-option {
+        padding: 1rem;
+    }
+
+    .run-item {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .run-details {
+        text-align: left;
+    }
+}
+
+/* Extra small devices (phones in portrait) */
+@media (max-width: 480px) {
+    .main-container {
+        padding: 0.5rem;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .tagline {
+        font-size: 0.9rem;
+    }
+
+    .nav-buttons {
+        top: 0.5rem;
+        right: 0.5rem;
+        left: 0.5rem;
+        padding: 0.75rem;
+    }
+
+    .card {
+        padding: 1rem;
+    }
+
+    .times-section {
+        padding: 1rem;
+    }
+
+    .times-stats {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+    }
+
+    .stat-card {
+        padding: 0.75rem;
+    }
+
+    .stat-number {
+        font-size: 1.25rem;
+    }
+
+    .modal-content {
+        margin: 0.5% auto;
+        width: 98%;
+        padding: 0.75rem;
+    }
+
+    .times-header h2 {
+        font-size: 1.25rem;
+    }
+
+    .times-header p {
+        font-size: 0.9rem;
+    }
+}
+
+/* Landscape orientation on mobile */
+@media (max-width: 768px) and (orientation: landscape) {
+    .nav-buttons {
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .user-info {
+        order: 0;
+        margin-bottom: 0;
+        padding-bottom: 0;
+        border-bottom: none;
+        width: auto;
+    }
+
+    .btn {
+        width: auto;
+        flex: 1;
+        min-width: 120px;
+    }
+
+    .main-title {
+        font-size: 2rem;
+    }
+
+    .times-stats {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+/* Touch-friendly improvements for mobile */
+@media (max-width: 768px) {
+    .btn {
+        min-height: 44px; /* Apple's recommended minimum touch target */
+        touch-action: manipulation; /* Prevents double-tap zoom */
+    }
+
+    .card {
+        touch-action: manipulation;
+    }
+
+    .user-time-card {
+        touch-action: manipulation;
+    }
+
+    .player-option {
+        min-height: 44px;
+        touch-action: manipulation;
+    }
+
+    .close {
+        min-width: 44px;
+        min-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* Improve scrolling on mobile */
+    .times-grid {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .player-selection {
+        -webkit-overflow-scrolling: touch;
+    }
+
+    /* Better spacing for mobile */
+    .header-section {
+        margin-bottom: 2rem;
+        margin-top: 5rem; /* Account for fixed nav */
+    }
+
+    /* Improve modal usability on mobile */
+    .modal {
+        padding: 1rem;
+    }
+
+    .modal-content {
+        border-radius: 0.75rem;
+    }
+
+    /* Better form inputs on mobile */
+    .form-input {
+        -webkit-appearance: none;
+        appearance: none;
+        border-radius: 0.5rem;
+    }
+
+    /* Improve video container on mobile */
+    #cameraContainer video {
+        max-width: 100%;
+        height: auto;
+        border-radius: 0.5rem;
     }
 }