Fix: Use correct initial zoom for mobile devices #239

ngoiyaeric · 2025-08-24T10:56:51Z

User description

The map component was not using the calculated initialZoom for mobile devices, causing the map to be zoomed in by default.

This commit fixes the issue by:

Updating currentMapCenterRef.current.zoom with the initialZoom value.
Using initialZoom when creating the mapboxgl.Map instance.

This ensures that mobile and tablet devices get the appropriate zoom level for a full globe preview.

PR Type

Bug fix

Description

Fix mobile device map zoom initialization issue
Ensure correct initial zoom level for mobile/tablet devices
Update map center reference with calculated zoom value

Diagram Walkthrough

flowchart LR
  A["Mobile Detection"] --> B["Calculate initialZoom"]
  B --> C["Update currentMapCenterRef.current.zoom"]
  B --> D["Use initialZoom in mapboxgl.Map"]
  C --> E["Consistent Zoom State"]
  D --> E

File Walkthrough

Relevant files

Bug fix

mapbox-map.tsx `Fix mobile map zoom initialization` components/map/mapbox-map.tsx Add assignment of `initialZoom` to `currentMapCenterRef.current.zoom` Replace hardcoded zoom reference with `initialZoom` variable in Map constructor Ensure consistent zoom state between ref and map instance	+2/-1

Summary by CodeRabbit

Bug Fixes
- Map now opens with a consistent initial zoom across devices, aligning the displayed zoom with the internal state.
- Startup zoom adapts to screen width (1.3 on narrow viewports, 2.0 on wider), improving first-load clarity and preventing unexpected zoom jumps.
- Results in smoother initial interactions, especially when centering the map or returning to the current location.

The map component was not using the calculated `initialZoom` for mobile devices, causing the map to be zoomed in by default. This commit fixes the issue by: - Updating `currentMapCenterRef.current.zoom` with the `initialZoom` value. - Using `initialZoom` when creating the `mapboxgl.Map` instance. This ensures that mobile and tablet devices get the appropriate zoom level for a full globe preview.

vercel · 2025-08-24T10:56:57Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
qcx	Ready	Preview	Comment	Aug 24, 2025 10:57am

coderabbitai · 2025-08-24T10:56:59Z

Walkthrough

The Mapbox map initialization now sets currentMapCenterRef.current.zoom to the computed initialZoom before creating the map and passes zoom: initialZoom into the Map constructor. No other exported entities or control flow were changed.

Changes

Cohort / File(s)	Summary
Mapbox init zoom alignment `components/map/mapbox-map.tsx`	Aligns ref and config by setting `currentMapCenterRef.current.zoom = initialZoom` prior to map creation and using `zoom: initialZoom` in the Mapbox constructor. No other logic changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant UI as UI
  participant MapComp as Map Component
  participant Mapbox as Mapbox GL

  UI->>MapComp: Mount component
  MapComp->>MapComp: Compute initialZoom (viewport-based)
  Note over MapComp: Update ref: currentMapCenterRef.current.zoom = initialZoom
  MapComp->>Mapbox: new Map({ center, zoom: initialZoom, ... })
  Mapbox-->>MapComp: Map instance ready
  MapComp-->>UI: Render map with aligned initial zoom

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

Review effort 1/5

Poem

A hop, a zoom, a tidy tune,
I nudge the map to match the moon—
Ref and config now in rhyme,
Centered snug at start-up time.
Ears up high, I press “initialize,”
The world appears—precisely sized. 🐇🗺️

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/mobile-map-zoom

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

CLAassistant · 2025-08-24T10:56:59Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

qodo-code-review · 2025-08-24T10:57:07Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review State Consistency Verify that all other places relying on `currentMapCenterRef.current.zoom` are updated or re-synced after map initialization to avoid divergence if the map immediately changes zoom (e.g., due to fitBounds or user interaction) right after mount. currentMapCenterRef.current.zoom = initialZoom; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/satellite-streets-v12', center: currentMapCenterRef.current.center, zoom: initialZoom, pitch: currentMapCenterRef.current.pitch, bearing: 0,

codiumai-pr-agent-free · 2025-08-24T10:57:07Z

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Initialization Order The PR sets currentMapCenterRef.current.zoom after calculating initialZoom but before creating the map. Verify that this ref is properly initialized earlier in the code to avoid potential null reference issues. currentMapCenterRef.current.zoom = initialZoom; map.current = new mapboxgl.Map({

codiumai-pr-agent-free · 2025-08-24T10:57:36Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Prevent null reference error Add a check to ensure `currentMapCenterRef.current` exists before accessing its zoom property. This prevents potential null reference errors if the ref hasn't been initialized yet. components/map/mapbox-map.tsx [393-398] let initialZoom = 2; if (typeof window !== 'undefined' && window.innerWidth < 768) { initialZoom = 1.3; } -currentMapCenterRef.current.zoom = initialZoom; +if (currentMapCenterRef.current) { + currentMapCenterRef.current.zoom = initialZoom; +} `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 2 __ Why: The suggestion adds a null check for `currentMapCenterRef.current`, but the surrounding code accesses other properties like `.center` and `.pitch` on the same object without a check, implying it is not expected to be null.	Low
More

qodo-code-review · 2025-08-24T10:57:40Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Safely initialize ref before use Guard against `currentMapCenterRef.current` being undefined or missing `zoom` to prevent a runtime crash on first render. Add a fallback object before assignment and use optional chaining or initialization to ensure safe access. components/map/mapbox-map.tsx [392-407] if (mapContainer.current && !map.current) { let initialZoom = 2; if (typeof window !== 'undefined' && window.innerWidth < 768) { initialZoom = 1.3; } + // Ensure the ref object exists with sane defaults before assignment + currentMapCenterRef.current = currentMapCenterRef.current ?? { center: [0, 0], zoom: initialZoom, pitch: 0 }; currentMapCenterRef.current.zoom = initialZoom; map.current = new mapboxgl.Map({ container: mapContainer.current, style: 'mapbox://styles/mapbox/satellite-streets-v12', center: currentMapCenterRef.current.center, zoom: initialZoom, pitch: currentMapCenterRef.current.pitch, bearing: 0, maxZoom: 22, attributionControl: true `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that `currentMapCenterRef.current` could be uninitialized, leading to a runtime error, and proposes a good defensive check to prevent this.	Medium
General	Improve mobile detection logic Account for high-DPI or atypical device metrics where `innerWidth` alone may misclassify devices. Use a more robust mobile check (e.g., pointer/hover or user agent) to avoid incorrect zoom on tablets or desktop with narrow windows. components/map/mapbox-map.tsx [393-396] let initialZoom = 2; -if (typeof window !== 'undefined' && window.innerWidth < 768) { +const isCoarsePointer = typeof window !== 'undefined' && window.matchMedia?.('(pointer: coarse)').matches; +const isSmallViewport = typeof window !== 'undefined' && window.innerWidth < 768; +if (isCoarsePointer \|\| isSmallViewport) { initialZoom = 1.3; } `[To ensure code accuracy, apply this suggestion manually]` Suggestion importance[1-10]: 5 __ Why: The suggestion provides a more robust method for mobile device detection by checking for a coarse pointer, which improves upon the simple `innerWidth` check.	Low
More

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

components/map/mapbox-map.tsx (1)
398-404: Nit: Use the ref as the single source of truth when constructing the Map.

You’ve just synced the ref to initialZoom; using the ref in the constructor keeps the configuration tied to that source of truth and avoids accidental drift if the initialization logic evolves.

Apply this minimal diff:
-        zoom: initialZoom,
+        zoom: currentMapCenterRef.current.zoom,

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between dcea53f and acb7c92.

📒 Files selected for processing (1)

components/map/mapbox-map.tsx (1 hunks)

🔇 Additional comments (1)

components/map/mapbox-map.tsx (1)

398-404: Initial zoom now applied consistently to Map and ref — aligns with PR goal.

Setting currentMapCenterRef.current.zoom = initialZoom before map creation and passing zoom: initialZoom ensures mobile and tablet widths start at the intended globe view. This directly addresses the previous mismatch on small screens.

qodo-code-review bot added the Review effort 1/5 label Aug 24, 2025

vercel bot deployed to Preview – qcx August 24, 2025 10:57 View deployment

coderabbitai bot reviewed Aug 24, 2025

View reviewed changes

ngoiyaeric merged commit 3028dcd into main Aug 24, 2025
4 of 5 checks passed

ngoiyaeric deleted the fix/mobile-map-zoom branch September 10, 2025 07:03

coderabbitai bot mentioned this pull request Sep 24, 2025

fix(map): preserve map view on entering drawing mode #294

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix: Use correct initial zoom for mobile devices #239

Fix: Use correct initial zoom for mobile devices #239

Uh oh!

ngoiyaeric commented Aug 24, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Aug 24, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Aug 24, 2025 •

edited

Loading

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

CLAassistant commented Aug 24, 2025

Uh oh!

qodo-code-review bot commented Aug 24, 2025

Uh oh!

codiumai-pr-agent-free bot commented Aug 24, 2025

Uh oh!

codiumai-pr-agent-free bot commented Aug 24, 2025

Uh oh!

qodo-code-review bot commented Aug 24, 2025

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Fix: Use correct initial zoom for mobile devices #239

Fix: Use correct initial zoom for mobile devices #239

Uh oh!

Conversation

ngoiyaeric commented Aug 24, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Diagram Walkthrough

File Walkthrough

Summary by CodeRabbit

Uh oh!

vercel bot commented Aug 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Aug 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Suggested labels

Poem

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

CLAassistant commented Aug 24, 2025

Uh oh!

qodo-code-review bot commented Aug 24, 2025

PR Reviewer Guide 🔍

Uh oh!

codiumai-pr-agent-free bot commented Aug 24, 2025

PR Reviewer Guide 🔍

Uh oh!

codiumai-pr-agent-free bot commented Aug 24, 2025

PR Code Suggestions ✨

Uh oh!

qodo-code-review bot commented Aug 24, 2025

PR Code Suggestions ✨

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ngoiyaeric commented Aug 24, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Aug 24, 2025 •

edited

Loading

coderabbitai bot commented Aug 24, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)