fix(mobile): mobile browser interface fixes (#2940)

[Yeraze]

Summary

Fixes #2940 — comprehensive mobile browser pass across the MeshMonitor UI.

First pass — foundational fixes (5 commits):

• messages.css: keep reply/emoji/delete actions visible on touch (@media (hover: none))
• BackupManagement.css: drop min-width: 600px on narrow viewports so backup modal fits
• map-analysis.css: time slider switches to width: min(520px, calc(100vw - 24px)) + safe-area bottom anchor
• Dashboard.css: 36×36 widget header buttons on touch; hide drag handle ≤768px
• App.css: ≥16px on inputs to prevent iOS zoom-on-focus; horizontal-scroll section nav; sticky composer with safe-area-inset-bottom; 44×44 close-button targets

Second pass — audit priorities (5 commits):

• P1 Modal.css: full-screen sheet on (max-width: 768px), scoped under .modal-overlay so per-modal max-width overrides don't beat it
• P2 100vh → 100dvh sweep across stylesheets and TSX (dual-property fallback in CSS, direct switch in TS)
• P3 env(safe-area-inset-*) on AppBanners, SaveBar, NewsPopup, AdvancedNodeFilterPopup, SearchModal mobile branch
• P4 44×44 tap targets on coarse pointers (App.css, SecurityTab, EmojiPickerModal, nodes sort-direction)
• P5 body { overflow-x: hidden }; .dashboard-grid and .graphs-grid use minmax(min(100%, ...px), 1fr) to collapse instead of overflow on tablet widths

Build / lint: typecheck clean, build clean. Lint shows pre-existing baseline only — no new diagnostics from this branch.

Deliberate skips with rationale:

• Sidebar.css:401,476 — landscape-density choice (28/32px); 44px would eat too much vertical space
• Dashboard.css:798,960 — non-interactive labels (.hop-bar-count, .heatmap-cell)
• SaveBar.css:132 — 20px notification badge, not a button
• nodes.css:1320 — slider readout, not interactive
• NewsPopup.css:260-261 — native checkbox; label is the click target
• Viewport meta user-scalable=no left alone (load-bearing for keyboard); 16px input rule mitigates the zoom side effect

Test plan

• npm run typecheck clean
• npm run build clean (only pre-existing chunk-size / deprecation warnings)
• Container deployed and verified loading on a real mobile browser (http://spire.yeraze.online:8081/meshmonitor/)
• Smoke test on iOS Safari (PWA + browser tab)
• Smoke test on Android Chrome
• Verify modals render full-screen on phones, retain bordered card on desktop
• Verify safe-area padding on notched devices

🤖 Generated with Claude Code

[github-actions]

Claude finished @Yeraze's task —— View job

---

PR Review: Mobile Browser Interface Fixes

Review Tasks

• Analyze scope and understand changes
• Review core CSS mobile improvements (App.css, Modal.css)
• Check viewport and safe-area handling
• Review touch target improvements
• Analyze TypeScript changes
• Check for potential bugs or issues
• Evaluate performance implications
• Assess security considerations
• Provide final recommendations

✅ Comprehensive and Well-Executed Mobile UI Improvements

This PR implements thoughtful mobile browser optimizations with excellent attention to detail. The changes follow modern mobile web development best practices.

Code Quality: Excellent

✅ Strong Points

1. Proper touch detection: Uses correct media queries @media (hover: none) and @media (pointer: coarse) to detect touch devices
2. iOS-safe viewport units: Systematic migration from 100vh → 100dvh to handle dynamic viewport changes on mobile browsers
3. Apple HIG compliance: 44×44px minimum touch targets follow Apple's Human Interface Guidelines
4. Safe area handling: Comprehensive env(safe-area-inset-*) usage for notched devices
5. Overflow prevention: Smart overflow-x: hidden and CSS Grid minmax(min(100%, Npx), 1fr) prevent tablet layout breaks

✅ CSS Architecture

• Clean separation of concerns with scoped selectors (.modal-overlay .modal-content)
• Fallback support: 100vh; 100dvh and env(safe-area-inset-bottom, 0) patterns
• Responsive breakpoint consistency at 768px

✅ TypeScript Changes

• Limited, focused changes in GpioPinSummary.tsx and PacketMonitorPage.tsx
• Consistent inline style patterns: maxHeight: 'calc(100dvh - 2rem)'

Performance: Good

• No performance concerns identified
• CSS-only improvements with minimal JavaScript changes
• Grid layout optimizations will improve tablet rendering efficiency

Security: Compliant

• Accessibility consideration: Author correctly kept user-scalable=no but mitigates with 16px input font-sizes to prevent iOS zoom
• No security vulnerabilities introduced

Testing Gaps

The test plan shows incomplete mobile device testing:

• Smoke test on iOS Safari (PWA + browser tab) — Missing
• Smoke test on Android Chrome — Missing
• Verify safe-area padding on notched devices — Missing

Minor Issues Found

Issue 1: Backup Modal min-width Override (BackupManagement.css:31-32)

.modal-content.backup-modal {
  min-width: 600px; /* Still present */
}

@media (max-width: 768px) {
  .modal-content.backup-modal {
    min-width: 0; /* Override only in mobile */
  }
}

Impact: Desktop users might see layout shifts. Consider removing the desktop min-width entirely or using min-width: min(600px, 100vw).

Issue 2: Potential FOUC Risk

The dual-property fallback pattern (100vh → 100dvh) could cause brief layout shifts on older browsers that don't support dvh. Consider feature detection if this becomes problematic.

Recommendations

✅ Approve with Suggestions

1. Complete mobile testing on actual devices before merging
2. Consider consolidating the backup modal width logic for cleaner CSS
3. Document the mobile testing results for future reference

Overall Assessment

This is a high-quality mobile improvement that demonstrates excellent understanding of mobile web challenges. The systematic approach across 24 files shows thorough planning and execution. The author's deliberate skips with rationale (sidebar density, non-interactive elements) show thoughtful decision-making.

Recommendation: Approve after mobile device testing completion

---