Make map dashboard front-end mobile responsive

[SAUMILDHANKAR]

Description

Make the entire map dashboard application mobile responsive. This includes adapting layout behavior, component visibility, touch interactions, and spacing for smaller screens. The goal is to ensure the app feels intuitive and polished on devices ranging from 360px wide smartphones to tablets and small laptops.

Goals

• Implement responsive layout using Material UI’s Grid and breakpoint system
• Optimize component stacking, spacing, and visibility for mobile screens
• Ensure map interactions (zoom, pan, tap) are smooth and finger-friendly
• Hide or collapse non-essential UI elements on small screens
• Validate usability across key breakpoints: 360px, 600px, 960px, and 1280px

Implementation Instructions

1. Use Material UI’s <Grid container> and <Grid item> to structure layout
2. Apply breakpoints using theme.breakpoints or sx prop to control layout shifts
3. Mobile-specific enhancements:
   • Collapse sidebar or map info panel into accordion or drawer
   • Replace hover-based interactions with tap equivalents
   • Increase touch target sizes to minimum 48px × 48px
   • Use position: sticky or fixed for mobile nav/footer if needed
   • Ensure map canvas resizes correctly and maintains aspect ratio
4. Use useMediaQuery() to conditionally render or style components
5. Test across multiple devices and emulators (Chrome dev tools, iOS/Android)
6. Fix any layout overflow, clipping, or zoom issues

Acceptance Criteria

• Layout adapts correctly at 360px, 600px, 960px, and 1280px breakpoints
• Map visualization and info panels are usable on mobile
• No horizontal scrolling or layout overflow on small screens
• All interactive elements meet mobile accessibility standards
• Verified against Figma design and spacing specs
• Tested on at least one physical mobile device

Resources

• [Design prototype](https://www.figma.com/proto/eRcnlUKzSsIJv3JcOMddwU/Map-Dashboard---Astar?page-id=14%3A727&node-id=5153-1312&viewport=-1071%2C388%2C0.41&t=BEOWGyV0vxUf75al-1&scaling=min-zoom&content-scaling=fixed)
• [Material UI Grid System](https://mui.com/material-ui/react-grid/)
• [Material UI Breakpoints](https://mui.com/material-ui/customization/breakpoints/)
• [Material UI useMediaQuery](https://mui.com/material-ui/react-use-media-query/)
• [Google Material Design - Responsive Layout](https://m3.material.io/foundations/layout/applying-layout/window-size-classes)

Reference Issues

• Typography and layout spec: Change the typography styles for react #159

[CodingLady22]

Hi @SAUMILDHANKAR , can you assign this to me?

[SAUMILDHANKAR]

Hi @CodingLady22 I added you as a maintainer to this project as well. Thanks for picking this issue.