Fix horizontal overflow on Galaxy S24 (360px width)

[Copilot]

App displayed incorrectly on Galaxy S24 and similar narrow devices (360px width), causing horizontal scrolling and content clipping.

Root Cause

• No global overflow prevention on viewport elements
• Missing responsive breakpoint for screens < 400px
• Container constraints not enforced with box-sizing
• Fixed-width grid columns overflowing at narrow viewports

Changes

Global overflow prevention

/* Prevent horizontal scroll across all viewports */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

.container {
  width: 100%;
  box-sizing: border-box;
}

New extra-small breakpoint

• Added @media (max-width: 400px) targeting Galaxy S24-like devices
• Applied across Layout, SetLogger, WorkoutExerciseCard, MesocycleDashboard, ProgressTracker

Component adjustments at < 400px

• SetLogger grid: grid-template-columns: 26px 1fr 48px 42px 88px (was causing overflow)
• Tab navigation: Reduced padding (0.5rem → 0.625rem) and font-size (0.875rem → 0.8125rem)
• Mobile nav: Icons 1.5rem → 1.25rem, labels 0.625rem → 0.5625rem
• Touch targets: Maintained 44px minimum for WCAG AAA compliance

Before/After

Before

After (360x800)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Bug: not responsive on Galaxy S24</issue_title>
<issue_description>The app is not displayed correctly on Galaxy S24:

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Bug: not responsive on Galaxy S24 #80

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.