From 264b91b443069128304c583763829da4281e0a04 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 11 Feb 2026 12:02:43 +0000
Subject: [PATCH 1/4] Initial plan


From a32f083a6f7234798e7c20d6a28929bf28a90b40 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 11 Feb 2026 12:06:49 +0000
Subject: [PATCH 2/4] Fix responsive design for Galaxy S24 and narrow screens

- Add overflow-x: hidden to html, body, and root to prevent horizontal scrolling
- Add box-sizing and width constraints to Layout container
- Add extra small screen breakpoint (max-width: 400px) for Galaxy S24-like devices
- Reduce padding and font sizes for tabs on narrow screens
- Improve SetLogger and WorkoutExerciseCard grid responsiveness
- Ensure all containers prevent horizontal overflow

Co-authored-by: wulfland <5276337+wulfland@users.noreply.github.com>
---
 src/App.css                                   |  3 ++
 .../mesocycles/MesocycleDashboard.css         | 12 ++++++
 src/components/progress/ProgressTracker.css   | 16 +++++++
 src/components/workouts/SetLogger.css         | 42 ++++++++++++++++++
 .../workouts/WorkoutExerciseCard.css          | 33 ++++++++++++++
 src/index.css                                 | 17 ++++++++
 src/layouts/Layout.css                        | 43 +++++++++++++++++++
 7 files changed, 166 insertions(+)

diff --git a/src/App.css b/src/App.css
index 7948eee..990a347 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,8 @@
 .app-container {
   max-width: 100%;
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  box-sizing: border-box;
 }
 
 .loading-state {
diff --git a/src/components/mesocycles/MesocycleDashboard.css b/src/components/mesocycles/MesocycleDashboard.css
index 1c58ea4..8b1fdde 100644
--- a/src/components/mesocycles/MesocycleDashboard.css
+++ b/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;
+  }
+}
diff --git a/src/components/progress/ProgressTracker.css b/src/components/progress/ProgressTracker.css
index 54c8a49..7a774ab 100644
--- a/src/components/progress/ProgressTracker.css
+++ b/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;
+  }
+}
diff --git a/src/components/workouts/SetLogger.css b/src/components/workouts/SetLogger.css
index e4b85be..c8c4167 100644
--- a/src/components/workouts/SetLogger.css
+++ b/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: 42px;
+    min-height: 42px;
+  }
+
+  .set-actions {
+    gap: 0.0625rem;
+  }
+}
diff --git a/src/components/workouts/WorkoutExerciseCard.css b/src/components/workouts/WorkoutExerciseCard.css
index 7de8515..13836f9 100644
--- a/src/components/workouts/WorkoutExerciseCard.css
+++ b/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;
+  }
+}
diff --git a/src/index.css b/src/index.css
index 2ad2934..c5a56bd 100644
--- a/src/index.css
+++ b/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',
@@ -84,16 +91,26 @@
   }
 }
 
+html {
+  /* Already included at top */
+}
+
 body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background-color: var(--color-background);
   color: var(--color-text);
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 #root {
   min-height: 100vh;
+  /* Prevent horizontal overflow */
+  overflow-x: hidden;
+  max-width: 100%;
 }
 
 h1,
diff --git a/src/layouts/Layout.css b/src/layouts/Layout.css
index 3fe06fd..fcb0740 100644
--- a/src/layouts/Layout.css
+++ b/src/layouts/Layout.css
@@ -4,6 +4,9 @@
   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 {
@@ -11,12 +14,18 @@
   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;
+  }
+}

From 54380bbe309d5ce3fa2658f269da23f92d0c73a7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 11 Feb 2026 12:10:20 +0000
Subject: [PATCH 3/4] Clean up duplicate CSS declarations per code review

- Remove empty html rule block
- Remove duplicate overflow-x and max-width declarations (already set globally)

Co-authored-by: wulfland <5276337+wulfland@users.noreply.github.com>
---
 src/index.css | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/index.css b/src/index.css
index c5a56bd..dbcf39e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -91,26 +91,16 @@ body {
   }
 }
 
-html {
-  /* Already included at top */
-}
-
 body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
   background-color: var(--color-background);
   color: var(--color-text);
-  /* Prevent horizontal overflow */
-  overflow-x: hidden;
-  max-width: 100%;
 }
 
 #root {
   min-height: 100vh;
-  /* Prevent horizontal overflow */
-  overflow-x: hidden;
-  max-width: 100%;
 }
 
 h1,

From f83d960be541512dce9a3d82c40945779ce8a625 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 11 Feb 2026 12:11:24 +0000
Subject: [PATCH 4/4] Ensure 44px minimum touch targets on extra small screens

- Increase button min-width and min-height from 42px to 44px for WCAG AAA compliance

Co-authored-by: wulfland <5276337+wulfland@users.noreply.github.com>
---
 src/components/workouts/SetLogger.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/workouts/SetLogger.css b/src/components/workouts/SetLogger.css
index c8c4167..9268895 100644
--- a/src/components/workouts/SetLogger.css
+++ b/src/components/workouts/SetLogger.css
@@ -356,8 +356,8 @@
   .btn-complete-set,
   .btn-remove-set,
   .btn-uncomplete-set {
-    min-width: 42px;
-    min-height: 42px;
+    min-width: 44px;
+    min-height: 44px;
   }
 
   .set-actions {