Fix horizontal overflow on Galaxy S24 (360px width)

src/App.css

@@ -1,5 +1,8 @@
 .app-container {
   max-width: 100%;
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 .loading-state {

src/components/mesocycles/MesocycleDashboard.css

@@ -120,3 +120,15 @@
     font-size: 1.25rem;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .dashboard-title {
+    font-size: 1.375rem;
+  }
+
+  .filter-tab {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+}

src/components/progress/ProgressTracker.css

@@ -103,3 +103,19 @@
     font-size: 0.85rem;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .progress-header h1 {
+    font-size: 1.125rem;
+  }
+
+  .progress-subtitle {
+    font-size: 0.8125rem;
+  }
+
+  .tab-btn {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.8125rem;
+  }
+}

src/components/workouts/SetLogger.css

@@ -322,3 +322,45 @@
     width: 60px;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .set-logger {
+    grid-template-columns: 26px 1fr 48px 42px 88px;
+    gap: 0.1875rem;
+    padding: 0.375rem 0.1875rem;
+  }
+
+  .set-number {
+    width: 1.375rem;
+    height: 1.375rem;
+    font-size: 0.625rem;
+  }
+
+  .weight-input,
+  .reps-input,
+  .rir-input {
+    font-size: 0.8125rem;
+    padding: 0.25rem;
+  }
+
+  .reps-input {
+    max-width: 48px;
+  }
+
+  .rir-input {
+    max-width: 42px;
+  }
+
+  .btn-add-rir,
+  .btn-complete-set,
+  .btn-remove-set,
+  .btn-uncomplete-set {
+    min-width: 44px;
+    min-height: 44px;
+  }
+
+  .set-actions {
+    gap: 0.0625rem;
+  }
+}

src/components/workouts/WorkoutExerciseCard.css

@@ -174,3 +174,36 @@
     grid-template-columns: 60px 100px 1fr 100px 80px 100px;
   }
 }
+
+/* Extra small screens */
+@media (max-width: 400px) {
+  .workout-exercise-header {
+    padding: 0.75rem;
+  }
+
+  .workout-exercise-title h3 {
+    font-size: 0.9375rem;
+  }
+
+  .exercise-number {
+    width: 1.625rem;
+    height: 1.625rem;
+    font-size: 0.75rem;
+  }
+
+  .workout-sets {
+    padding: 0.625rem;
+  }
+
+  .sets-header {
+    grid-template-columns: 26px 1fr 48px 42px 88px;
+    font-size: 0.5625rem;
+    padding: 0.3125rem 0.1875rem;
+    gap: 0.1875rem;
+  }
+
+  .btn-add-set {
+    padding: 0.5625rem;
+    font-size: 0.8125rem;
+  }
+}

src/index.css

@@ -5,6 +5,13 @@
   box-sizing: border-box;
 }
 
+/* Prevent horizontal overflow globally */
+html,
+body {
+  overflow-x: hidden;
+  max-width: 100%;
+}
+
 :root {
   font-family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',

src/layouts/Layout.css

@@ -4,19 +4,28 @@
   min-height: 100vh;
   /* Add padding for mobile bottom navigation */
   padding-bottom: env(safe-area-inset-bottom);
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 .header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 1rem 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 .container {
   max-width: var(--container-max-width, 1200px);
   margin: 0 auto;
   padding: 0 var(--container-padding, 1rem);
+  /* Ensure container doesn't cause horizontal overflow */
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .header .container {
@@ -189,3 +198,37 @@
     font-size: 1.0625rem;
   }
 }
+
+/* Extra small screens (Galaxy S24, iPhone SE, etc.) */
+@media (max-width: 400px) {
+  :root {
+    --container-padding: 0.75rem;
+  }
+
+  .header {
+    padding: 0.75rem 0;
+  }
+
+  .logo {
+    font-size: 1.25rem;
+  }
+
+  .nav-mobile {
+    padding: 0.375rem 0;
+    padding-bottom: calc(0.375rem + env(safe-area-inset-bottom));
+  }
+
+  .nav-mobile-link {
+    min-width: 40px;
+    padding: 0.125rem 0.25rem;
+    max-width: 70px;
+  }
+
+  .nav-mobile-icon {
+    font-size: 1.25rem;
+  }
+
+  .nav-mobile-label {
+    font-size: 0.5625rem;
+  }
+}