fix(web): prevent mobile pinch and input-focus zoom

[jappyjan]

Summary

The viewport meta omitted `maximum-scale` and `user-scalable`, so iOS Safari auto-zoomed when an input was focused and let the user pinch the chrome. Both break the remote-control workflow over Tailscale on a phone.

Two changes:

1. Tighten the existing viewport meta with `maximum-scale=1, user-scalable=no` (preserves `viewport-fit=cover`).
2. Add `touch-action: pan-x pan-y` to `html` and `body` in `apps/web/src/index.css`.

Why both

`user-scalable=no` alone is unreliable on modern iOS Safari — Apple deferred to it for a long time, and even with current builds it's a hint, not a contract. `touch-action: pan-x pan-y` is the mechanism iOS does honor consistently: pan/scroll still works, pinch-to-zoom is blocked. It only affects touch input, so desktop browsers are unchanged.

Verified empirically that just the viewport-meta change is not enough on iOS — both pinch-zoom and input-focus zoom kept happening on iPhone until `touch-action` was added.

Test plan

• iPhone Safari: tap composer / search input → no zoom
• iPhone Safari: pinch chat or sidebar → no zoom
• iPhone Safari: scrolling and tap targets still work
• Desktop browsers: layout unchanged

Trade-off

System-level pinch zoom is disabled on touch. iOS still honors the OS-level "Display Zoom" / "Accessibility > Zoom" setting regardless, so a11y users keep their escape hatch. This matches the explicit user requirement for a fixed remote-control viewport.

Screenshots / video

ScreenRecording_04-28-2026.23-50-25_1.mp4

Note

Prevent mobile pinch-zoom and input-focus zoom on web

• Sets maximum-scale=1 and user-scalable=no in the viewport meta tag in index.html to block zoom on browsers that honor these directives.
• Adds touch-action: pan-x pan-y to html and body in index.css to disable pinch gestures on iOS Safari, which ignores the viewport meta tag restrictions.
• Behavioral Change: users on mobile can no longer pinch-zoom or trigger input-focus zoom anywhere on the page.

^{Macroscope summarized 277c467.}

---

Note

Medium Risk
Disables pinch-to-zoom across the app on touch devices, which can impact accessibility and mobile usability despite being a small, localized change.

Overview
Prevents iOS Safari from zooming the page (pinch-zoom and input-focus zoom) by tightening the viewport meta tag (maximum-scale=1, user-scalable=no).

Adds touch-action: pan-x pan-y on html and body to reliably block pinch-zoom while preserving scrolling/panning on touch devices.

^{Reviewed by Cursor Bugbot for commit 277c467. Bugbot is set up for automated code reviews on this repo. Configure here.}

Summary by CodeRabbit

• Bug Fixes
  • Improved mobile device experience by optimizing viewport behavior and touch gesture handling for better stability and responsiveness.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: fc49d9dd-673e-41b9-91a4-34ca98553ea3

📥 Commits

Reviewing files that changed from the base of the PR and between dbebc38 and 277c467.

📒 Files selected for processing (2)

• apps/web/index.html
• apps/web/src/index.css

---

📝 Walkthrough

Walkthrough

Updated viewport meta tag configuration to prevent user zooming while constraining scaling, and added touch-action CSS properties to enable pan gestures on the html and body elements for improved mobile interaction handling.

Changes

Cohort / File(s)	Summary
Viewport Configuration apps/web/index.html	Modified viewport meta tag to set maximum-scale=1 and user-scalable=no, preventing user zoom while maintaining initial-scale=1 and viewport-fit=cover.
Touch Action Styles apps/web/src/index.css	Added touch-action: pan-x pan-y to html and body in base layer to enable controlled panning gestures on touch devices.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A hop, a pan, and a pinch of scale,
No zooming fingers on this mobile tale,
Touch actions flow, left and right they glide,
The viewport holds fast, a steady guide!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: preventing mobile pinch and input-focus zoom on the web app.
Description check	✅ Passed	The description comprehensively covers what changed, why it was necessary, includes test plan checkboxes, addresses trade-offs, and provides supporting media.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jappyjan]

@coderabbitai review

[macroscopeapp]

Approvability

Verdict: Approved

This is a minor, self-contained CSS/HTML change that prevents mobile pinch-zoom and input-focus zoom. The changes only affect mobile touch behavior and have no impact on backend logic, security, or other runtime behavior.

^{You can customize Macroscope's approvability policy. Learn more.}

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[gameroman]

Duplicate of #1292 and I think #1652 is a better solution

[gameroman]

This can be closed now since #1652 is merged