feat(explore): add mobile responsiveness to map view

[nicholasalanbrown]

Summary

Adds mobile responsiveness to the CommonGrid map view (/explore).

Closes MAI-47

What changed

ExplorerShell.tsx

Mobile-first default layout

• On mount, detects if the viewport is mobile (< 768px) via matchMedia and switches to map layout by default (was showing the list/hybrid split which collapsed badly on small screens)

Keep-alive map on mobile

• Map is always mounted when on mobile, just hidden when list view is active (was unmounting, losing viewport position and causing a flash)
• Uses CSS hidden class instead of conditional rendering so Mapbox doesn't need to re-initialize on toggle

New MobileViewToggle component

• Replaces the previous floating toggle button with a cleaner pill that uses bg-foreground text-background for proper contrast in both light/dark mode
• active:scale-95 for tactile feedback, select-none to prevent text selection on mobile tap

Touch support for HybridLayout resize handle

• Added onTouchStart handler alongside existing onMouseDown
• Touch listeners use { passive: false } on touchmove so preventDefault can prevent scroll interference
• Resize handle gets touch-none Tailwind class to opt that element out of browser touch handling

Testing

• ✅ TypeScript clean (tsc --noEmit exits 0)
• ✅ Next.js build passes (npm run build exits 0)
• Manual testing recommended on actual mobile device for:
  • Map-first default view on load
  • Toggle pill behavior (map ↔ list)
  • Pinch-to-zoom on map
  • Tab bar scrolling on narrow screens

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
opengrid	Ready	Preview, Comment	Mar 19, 2026 8:33pm