[EPIC][MOBILE]: Mobile layout testing and optimization

[crivetimihai]

📱 Epic: Mobile Layout Testing & Optimization

Goal

Ensure the existing Admin UI (HTMX/Alpine.js) works well on mobile phones and tablets. Implement systematic mobile testing, fix layout issues, and optimize touch interactions for the current web-based UI (not a native app).

Why Now?

1. Field Usage: Admins need to check status and respond to issues from mobile devices
2. Untested Territory: Current UI developed primarily for desktop; mobile experience unknown
3. Quick Wins: Many issues can be fixed with CSS adjustments
4. Foundation: Validates responsive requirements before any framework migration

---

📖 User Stories

US-1: Mobile Device Testing Matrix

As a QA engineer
I want systematic testing across mobile devices
So that we identify and fix mobile-specific issues

Acceptance Criteria:

• Test on iOS Safari (iPhone 12, 14, 15 sizes)
• Test on Android Chrome (various screen sizes)
• Test on tablets (iPad, Android tablets)
• Document all issues found with screenshots
• Prioritize fixes by severity

US-2: Responsive Layout Fixes

As a mobile user
I want the UI to fit my screen without horizontal scrolling
So that I can use it comfortably

Acceptance Criteria:

• No horizontal overflow on any page
• Tables scroll horizontally or convert to cards
• Forms fit within viewport
• Modals sized appropriately for mobile
• Navigation accessible on small screens

US-3: Touch Target Optimization

As a touch screen user
I want buttons and links large enough to tap accurately
So that I don't accidentally tap the wrong element

Acceptance Criteria:

• All interactive elements ≥44x44px
• Adequate spacing between tap targets
• No hover-only interactions
• Dropdown menus work on touch
• Swipe gestures where appropriate

US-4: Mobile Navigation

As a mobile user
I want easy navigation on my phone
So that I can access all sections

Acceptance Criteria:

• Collapsible/hamburger menu on mobile
• Current section clearly indicated
• Easy way to return to main sections
• Search accessible from mobile nav

US-5: Playwright Mobile Tests

As a developer
I want automated mobile viewport tests
So that regressions are caught in CI

Acceptance Criteria:

• Playwright tests run with mobile viewports
• Test iPhone SE (375px), iPhone 14 (390px), iPad (768px)
• Critical flows tested on mobile
• Visual regression for mobile layouts
• CI runs mobile tests

---

📋 Implementation Tasks

Phase 1: Audit & Documentation

• Create mobile testing checklist
• Test all pages on iPhone Safari
• Test all pages on Android Chrome
• Test on iPad/tablet
• Document issues with screenshots
• Prioritize fixes (P0/P1/P2)

Phase 2: Critical Fixes (P0)

• Fix any completely broken pages
• Fix navigation on mobile
• Fix critical forms (login, create entity)
• Fix table overflow issues
• Ensure modals work on mobile

Phase 3: Layout Improvements (P1)

• Add responsive breakpoints where missing
• Implement card view for tables on mobile
• Optimize form layouts for mobile
• Fix spacing and alignment issues
• Adjust font sizes for readability

Phase 4: Touch Optimization (P2)

• Audit touch target sizes
• Increase button/link sizes
• Add touch-friendly alternatives
• Remove hover-dependent features
• Add swipe gestures where helpful

Phase 5: Automated Testing

• Add Playwright mobile viewport configs
• Create mobile-specific test suite
• Add visual regression for mobile
• Integrate into CI pipeline
• Document mobile testing process

---

🎯 Test Device Matrix

Device	OS	Browser	Viewport	Priority
iPhone SE	iOS 17	Safari	375x667	High
iPhone 14	iOS 17	Safari	390x844	High
iPhone 14 Pro Max	iOS 17	Safari	430x932	Medium
Pixel 7	Android 14	Chrome	412x915	High
Samsung S23	Android 14	Chrome	360x780	Medium
iPad	iPadOS 17	Safari	768x1024	High
iPad Pro	iPadOS 17	Safari	1024x1366	Medium

---

✅ Success Criteria

• All pages usable on iPhone SE (375px)
• No horizontal scrolling on any page
• Touch targets ≥44px
• Mobile navigation functional
• Playwright mobile tests in CI
• Mobile testing documented

---

🔗 Related Issues

• [EPIC][MOBILE]: Mobile-first responsive redesign #2283 - Mobile-First Responsive Redesign (future PWA work)

---

📚 References

• Chrome DevTools Device Mode
• Playwright Device Emulation
• Mobile Touch Target Guidelines