From 5cd7a2015289cde734acad04352bae83e909abae Mon Sep 17 00:00:00 2001 From: Siavash Sameni Date: Fri, 10 Apr 2026 15:26:08 +0400 Subject: [PATCH] fix(ui): disable WebView pinch-zoom and desktop right-click menu MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two small WebView hardening tweaks that apply to both Android (Tauri mobile) and desktop (Tauri) since the frontend is shared: - index.html viewport meta now sets maximum-scale=1.0, minimum-scale=1.0, and user-scalable=no. This stops users on Android from pinch-zooming out of the fixed-layout UI. Desktop is unaffected because the Tauri WebView ignores pinch gestures anyway. - main.ts installs global listeners that preventDefault on contextmenu (kills the browser-style right-click menu that exposed Inspect / Reload / Back / Forward entries on desktop), keydown Ctrl+-/+/0 (stops keyboard zoom of the fixed layout), and gesture* + ctrl-wheel events (trackpad pinch on WebKit + Chromium respectively). Dev tools remain accessible via F12 / Cmd-Opt-I keyboard shortcuts — only the right-click entry point is suppressed. Android has no right-click so that part is a no-op there. Co-Authored-By: Claude Opus 4.6 (1M context) --- desktop/index.html | 5 ++++- desktop/src/main.ts | 35 +++++++++++++++++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/desktop/index.html b/desktop/index.html index bea31aa..9f31ac9 100644 --- a/desktop/index.html +++ b/desktop/index.html @@ -2,7 +2,10 @@ - + WarzonePhone diff --git a/desktop/src/main.ts b/desktop/src/main.ts index 2ba0748..7cd6640 100644 --- a/desktop/src/main.ts +++ b/desktop/src/main.ts @@ -2,6 +2,41 @@ import { invoke } from "@tauri-apps/api/core"; import { listen } from "@tauri-apps/api/event"; import { generateIdenticon, createIdenticonEl } from "./identicon"; +// ── WebView hardening ── +// Suppress the browser-style right-click context menu on desktop Tauri — it +// exposes Inspect/Reload/Back/Forward entries that don't belong in a native- +// feeling VoIP app. Dev tools remain accessible via the usual keyboard +// shortcuts (F12 / Cmd-Opt-I). On Android there is no right-click so this is +// a no-op there. +document.addEventListener("contextmenu", (e) => e.preventDefault()); + +// Also suppress browser-level zoom via keyboard (Ctrl/Cmd + / - / 0) so the +// fixed-layout UI can't be accidentally scaled. Pinch-zoom is already handled +// at the viewport meta level in index.html. +document.addEventListener( + "keydown", + (e) => { + if ((e.ctrlKey || e.metaKey) && (e.key === "+" || e.key === "-" || e.key === "=" || e.key === "0")) { + e.preventDefault(); + } + }, + { capture: true }, +); + +// Block gesture-based zoom on browsers that fire these legacy events (mainly +// Safari / WebKit). Chromium sends `wheel` with ctrlKey for trackpad pinch — +// catch that too. +document.addEventListener("gesturestart", (e) => e.preventDefault()); +document.addEventListener("gesturechange", (e) => e.preventDefault()); +document.addEventListener("gestureend", (e) => e.preventDefault()); +document.addEventListener( + "wheel", + (e) => { + if (e.ctrlKey) e.preventDefault(); + }, + { passive: false }, +); + // ── Elements ── const connectScreen = document.getElementById("connect-screen")!; const callScreen = document.getElementById("call-screen")!;