dostulata/initiative
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile-native touch targets and spacious row layout #13

New Issue
Open
opened 2026-03-24 17:43:04 +01:00 by dostulata · 0 comments
dostulata commented 2026-03-24 17:43:04 +01:00
Owner
Copy Link
Copy Source

Summary

Make the UI feel natural on phones by increasing combatant row height, tap target sizes, font sizes, and spacing on mobile. All features remain accessible — nothing is hidden, only resized for comfortable finger interaction. Includes safe area inset handling for notched devices.

Acceptance Criteria

  • Combatant rows use moderately increased padding and font sizes on phones (<640px), remaining single-line and fitting at least 8 rows on screen without scrolling
  • All interactive elements (condition tags, HP/AC/initiative values, rename/delete/add buttons) have a minimum 44px tap target on touch devices
  • Input fields use at least 16px font size on mobile to prevent iOS Safari auto-zoom
  • The action bar's custom stat fields (Init/AC/MaxHP) wrap gracefully on narrow screens instead of overflowing
  • Condition picker and HP popover are comfortably sized for finger interaction on phones
  • Safe area insets are respected — bottom bar has padding for iPhone home indicator, content avoids notch areas
  • All features remain accessible on mobile — no functionality is hidden or removed, only resized
  • Desktop layout (>=640px) is unchanged
## Summary Make the UI feel natural on phones by increasing combatant row height, tap target sizes, font sizes, and spacing on mobile. All features remain accessible — nothing is hidden, only resized for comfortable finger interaction. Includes safe area inset handling for notched devices. ## Acceptance Criteria - [ ] Combatant rows use moderately increased padding and font sizes on phones (<640px), remaining single-line and fitting at least 8 rows on screen without scrolling - [ ] All interactive elements (condition tags, HP/AC/initiative values, rename/delete/add buttons) have a minimum 44px tap target on touch devices - [ ] Input fields use at least 16px font size on mobile to prevent iOS Safari auto-zoom - [ ] The action bar's custom stat fields (Init/AC/MaxHP) wrap gracefully on narrow screens instead of overflowing - [ ] Condition picker and HP popover are comfortably sized for finger interaction on phones - [ ] Safe area insets are respected — bottom bar has padding for iPhone home indicator, content avoids notch areas - [ ] All features remain accessible on mobile — no functionality is hidden or removed, only resized - [ ] Desktop layout (>=640px) is unchanged
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
dostulata
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: dostulata/initiative#13
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?