fix: New Issue modal unusable on mobile

[oaquique]

Summary

Fixes #488 — On mobile (Android/iOS), clicking "New Issue" from the sidebar menu opens the modal behind the sidebar overlay, and closing the sidebar also unmounts the modal.

Root cause: CreateTicketModal was rendered inside SidebarContent, which on mobile lives inside a Sheet component. Two problems resulted:

• The Sheet uses z-50 while the Dialog used z-10, so the modal appeared behind the overlay
• Since the modal's React state lived inside the Sheet's component tree, closing the sidebar unmounted the modal entirely

Fix:

• Moved CreateTicketModal from AppSidebar to the ShadLayout, outside the sidebar DOM tree but still inside SidebarProvider
• Used a custom DOM event (open-create-ticket) to communicate between the sidebar's keyboard handler and the modal
• Bumped the Dialog z-index from z-10 to z-[60] (above the Sheet's z-50)
• Auto-close the mobile sidebar when the modal is triggered via setOpenMobile(false)

Test plan

• On mobile (or responsive dev tools), open the sidebar and tap "New Issue" — sidebar should close and the modal should appear with full focus
• Press the "c" keyboard shortcut on desktop — modal should open as before
• Verify the modal's dropdowns (client, engineer, type) still work correctly
• Verify closing the modal works (X button, clicking outside, ESC key)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 6, 2026 1:34am