Make full-screen map the default editing mode for mobile users

[latin-panda]

Description

Transition the map view to a full-screen layout on mobile devices. This includes fixing existing iPhone-specific rendering issues in full-screen mode and experimenting with JavaScript-based mobile detection (avoiding user agent strings) to enable the experience on browser resize.

Must resolve the challenge of the full-screen map becoming scrollable (advanced panel is open) to prevent adding points accidentally

Goals

• All map questions have a preview inline that expands when you tap on it. Currently users can accidentally scroll on the map instead of the form. They can still scroll at the top or in the gutters, but it's hard for larger hands or folks with lower dexterity.
• Leverage the existing functionality as much as possible. For example using the collapse map icon to close full screen mode. We know it might be more intuitive for them to have a "Done" button, but we will come back to that later depending on feedback.

Changes

• All question types with a map behave the same on mobile
• Inline-map is reduced in height
• Hide all the buttons on the map except the full-screen button when it's on mobile - Figma
• The full-screen button's icon is replaced the expand and collapse icon for desktop and mobile
• Errors are shown in full-screen mode - Figma (if possible, closable)
• For maps appearance - the overlay is shown, if point is removed, they see a close "X" button - Figma

---

Checklist

• Does it need UI/UX design?
  • Yes. Define how overlays and navigation elements sit on top of the full-screen map.
  • No
• Does it need API design?
  • Yes. Specify the endpoints, methods, or data structures needed.
  • No
• Does it need design around state flow?
  • Yes. Outline how the map enters and exits full-screen mode during navigation.
  • No
• Does it need a test plan?
  • Yes.
  • No. Reuse existing test plans

---

User Stories

• As a mobile user,
  I want the map to utilize the entire screen,
  so that I have a clearer view of my surroundings and adding points are intentional (no my mistake when scrolling the page)

---

Design

• Figma: [Insert URL]
• Design Docs: N/A

---

Dependencies

• Must resolve iPhone-specific full-screen bug

---

Additional Notes

• Implementation: We usually prefer mobile detection using responsive CSS because it's lightweight and reliable. For this feature, I'll experiment with JS to find the best option (not using user agent). I already have a few in mind.
• Priority: iPhone full-screen fixes must be addressed first.

[latin-panda]

@alyblenkin I've moved this to next, it needs more exploration and design.