Skip to content

Fix iPhone workout layout: make action buttons visible#75

Merged
wulfland merged 4 commits intomainfrom
copilot/fix-iphone-training-bug
Feb 5, 2026
Merged

Fix iPhone workout layout: make action buttons visible#75
wulfland merged 4 commits intomainfrom
copilot/fix-iphone-training-bug

Conversation

Copy link
Contributor

Copilot AI commented Feb 5, 2026

On iPhone (390px viewport), the set logger grid overflowed, hiding RIR column and action buttons (complete/remove set). Users couldn't complete sets or start rest timer.

Changes

Removed -2.5/+2.5 weight adjustment buttons

  • These buttons took up too much horizontal space on mobile
  • Users can still adjust weight by typing or using the native number input stepper
  • Input step attribute set to 2.5 for convenient keyboard/stepper adjustments

Simplified mobile grid layout (≤640px)

  • New layout: 28px | 1fr | 60px | 44px | 80px
  • Weight input now uses flexible width (1fr) instead of fixed button group
  • Hid "Previous" column on mobile (still accessible via 📊 button)

Accessibility preserved

  • Maintained 44×44px minimum touch targets on action buttons
  • WCAG compliance intact

Modified files

  • src/components/workouts/SetLogger.tsx - Removed weight buttons, simplified JSX
  • src/components/workouts/SetLogger.css - Simplified grid and removed button styles

Screenshots

Before: Action buttons cut off, layout overflowing
Before


Fixes #74

Copilot AI and others added 2 commits February 5, 2026 15:57
… action buttons

Co-authored-by: wulfland <5276337+wulfland@users.noreply.github.com>
Co-authored-by: wulfland <5276337+wulfland@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix alignment issues for weight and reps on iPhone Fix iPhone workout layout: make action buttons visible Feb 5, 2026
Copilot AI requested a review from wulfland February 5, 2026 16:02
@wulfland
Copy link
Owner

wulfland commented Feb 5, 2026

@copilot - the fields are overlapping in the screenshots. Can we remove the -2,5 and +2,5. I think that is not so important than a good looking layout. This is the most important form.

Simplified the weight input by removing the increment/decrement buttons:
- Removes width constraints that caused overflow on iPhone
- Users can still adjust weight by typing or using native number input controls
- More space for essential columns (weight, reps, RIR, actions)
- Simplified grid layout for mobile: 28px | 1fr | 60px | 44px | 80px

Fixes alignment issues on iPhone reported in #74
@wulfland wulfland marked this pull request as ready for review February 5, 2026 16:37
@wulfland wulfland merged commit 81ee336 into main Feb 5, 2026
4 checks passed
@wulfland wulfland deleted the copilot/fix-iphone-training-bug branch February 5, 2026 16:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug: I cannot train on iPhone

2 participants