Service area drawing tool UX improvements — collapsible panels, larger drag handles, fix map orientation reset

Objective

• Make the service area drawing and editing experience usable at normal screen sizes without requiring workarounds or excessive precision.
• Unblock brands like SE (Catherine Lemoine) who have pending service area changes they've been unable to complete due to the current UX limitations.

Background

• The service area drawing tool in Settings suffers from a combination of layout and interaction problems that make it difficult to use in practice, particularly for editing existing areas rather than creating new ones.
• Catherine Lemoine (SE/Residential Inspector) raised this during the Implementation meeting on June 23, noting she had spent over an hour trying to make changes and gave up. She described the map canvas as extremely small on her screen because the service area name list panel and a total service area info box consume most of the available space.
• The specific issues raised across Catherine, Shayna Turilli (AJF), and Sean Garvey (Dwell Inspect AZ):
• Panels consume too much screen real estate — The service area names list and info box are fixed in place during edit/draw mode, leaving a very small map canvas to work with. Both panels should be collapsible or hidden when the user enters draw/edit mode so the map can expand to fill the screen.
• Drag handles and polygon points are too small — The dots marking polygon vertices are difficult to see and hard to click and drag accurately. They need to be larger and more visually distinct.
• Map can be accidentally reset to a flat/world view — Double-clicking the map canvas during editing can flip the map to a flat global projection, requiring the user to manually drag it back. This is a significant annoyance and should be prevented or at least made easily recoverable.
• Chris Scott agreed with all three improvements on the call and noted the screen is "not great" as-is, confirming the fixes are planned.
• Ryan and Chris also aligned on a modal option as an alternative layout approach — opening the drawing tool in a modal overlay that gives the full viewport to the map canvas.

Product Decisions

Locked

1. Collapsible panels — The service area name list panel and the total service area info box should collapse or hide when the user enters draw/edit mode, maximizing map canvas space.
2. Larger drag handles — Polygon vertex dots and drag handles should be made significantly larger and more visually distinct to improve precision.
3. Prevent accidental map orientation reset — Double-click behavior that resets the map to a flat/world view should be suppressed or guarded against during draw/edit mode.

Open

1. Panel approach vs. modal — Should collapsed panels be implemented as collapsible sidebars within the existing page layout, or should the drawing tool open in a full-viewport modal? Both were discussed on the June 23 call. Modal may be cleaner but is more implementation work. To be decided by Chris and Ryan when the issue is assigned to an engineer.

Scope

Frontend

• attik-frontend/src/app/tools/settings/service-areas/ServiceAreaMap.tsx — The primary component for the service area drawing tool. All three UX improvements (panel layout, drag handle sizing, orientation lock) are centered here.
• attik-frontend/src/util/functions/mapbox/validateServiceAreaPolygon.ts — Polygon validation utility; relevant context for understanding how polygon points are managed, which informs the drag handle improvements.
• The settings page routing for service areas lives under attik-frontend/src/app/tools/settings/service-areas/ — if a modal approach is chosen, the page-level layout component in this directory will need to accommodate the overlay.

References

• Implementation — All Regions transcript, June 23, 2026 (Catherine Lemoine, Shayna Turilli, Sean Garvey, Chris Scott, Ryan Wagner)