[PR #5] [MERGED] Add mobile responsive design with hamburger menu #9

New issue

Closed

opened 2026-03-16 12:11:32 +03:00 by kerem · 0 comments

kerem commented

2026-03-16 12:11:32 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hipcityreg/situation-monitor/pull/5
Author: @xaelophone
Created: 1/9/2026
Status: ✅ Merged
Merged: 1/9/2026
Merged by: @xaelophone

Base: main ← Head: feature/mobile-responsive

📝 Commits (3)

45f189e Add mobile responsive design with hamburger menu
3a69df9 Enhance mobile UX with horizontal scroll cards
8a08d19 Fix mobile responsive issues from code review

📊 Changes

3 files changed (+583 additions, -3 deletions)

View changed files

📝 index.html (+20 -3)
📝 js/main.js (+35 -0)
📝 styles.css (+528 -0)

📄 Description

Summary

Add hamburger menu that collapses header buttons on mobile (≤768px)
Add responsive CSS for tablet (768px) and phone (480px) breakpoints
Reduce map height on mobile devices (350px tablet, 280px phone)
Add touch-friendly tap targets (44px minimum)
Full-screen modals on small phones
Hide map tooltip and legend on touch devices
Disable panel drag/resize on mobile

Test plan

Test hamburger menu appears at ≤768px viewport
Test menu opens/closes on tap
Test menu closes on outside tap
Test map height reduces appropriately
Test all buttons have 44px+ tap targets
Test settings modal full-screen on small phones
Verify no horizontal scroll at any width

🤖 Generated with Claude Code

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hipcityreg/situation-monitor/pull/5 **Author:** [@xaelophone](https://github.com/xaelophone) **Created:** 1/9/2026 **Status:** ✅ Merged **Merged:** 1/9/2026 **Merged by:** [@xaelophone](https://github.com/xaelophone) **Base:** `main` ← **Head:** `feature/mobile-responsive` --- ### 📝 Commits (3) - [`45f189e`](https://github.com/hipcityreg/situation-monitor/commit/45f189ed2f3156c2be41a30561e8905a58e1991a) Add mobile responsive design with hamburger menu - [`3a69df9`](https://github.com/hipcityreg/situation-monitor/commit/3a69df9c8de6fe6c65e62eb31353783d14319d5e) Enhance mobile UX with horizontal scroll cards - [`8a08d19`](https://github.com/hipcityreg/situation-monitor/commit/8a08d1906e365b89ca79b35ff7620c6761c04378) Fix mobile responsive issues from code review ### 📊 Changes **3 files changed** (+583 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `index.html` (+20 -3) 📝 `js/main.js` (+35 -0) 📝 `styles.css` (+528 -0) </details> ### 📄 Description ## Summary - Add hamburger menu that collapses header buttons on mobile (≤768px) - Add responsive CSS for tablet (768px) and phone (480px) breakpoints - Reduce map height on mobile devices (350px tablet, 280px phone) - Add touch-friendly tap targets (44px minimum) - Full-screen modals on small phones - Hide map tooltip and legend on touch devices - Disable panel drag/resize on mobile ## Test plan - [ ] Test hamburger menu appears at ≤768px viewport - [ ] Test menu opens/closes on tap - [ ] Test menu closes on outside tap - [ ] Test map height reduces appropriately - [ ] Test all buttons have 44px+ tap targets - [ ] Test settings modal full-screen on small phones - [ ] Verify no horizontal scroll at any width 🤖 Generated with [Claude Code](https://claude.ai/code) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>