Prevent zoom everywhere (ReactFlow is zoomable by default)

2026-01-08 22:48:14 -05:00 · 2025-02-03 23:14:53 -08:00
parent c17272f2da
commit 2f2587f92c
2 changed files with 44 additions and 1 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import './globals.css'
+import { ZoomPrevention } from './zoom-prevention'

 export const metadata: Metadata = {
  title: 'Sim Studio',
@@ -14,7 +15,16 @@ export default function RootLayout({
 }) {
  return (
    <html lang="en">
-      <body>{children}</body>
+      <head>
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        />
+      </head>
+      <body>
+        <ZoomPrevention />
+        {children}
+      </body>
    </html>
  )
 }
--- a/app/zoom-prevention.tsx
+++ b/app/zoom-prevention.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function ZoomPrevention() {
+  useEffect(() => {
+    const preventZoom = (e: KeyboardEvent | WheelEvent) => {
+      // Prevent zoom on ctrl/cmd + wheel
+      if (e instanceof WheelEvent && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault()
+      }
+
+      // Prevent zoom on ctrl/cmd + plus/minus/zero
+      if (e instanceof KeyboardEvent && (e.ctrlKey || e.metaKey)) {
+        if (e.key === '=' || e.key === '-' || e.key === '0') {
+          e.preventDefault()
+        }
+      }
+    }
+
+    // Add event listeners
+    document.addEventListener('wheel', preventZoom, { passive: false })
+    document.addEventListener('keydown', preventZoom)
+
+    // Cleanup
+    return () => {
+      document.removeEventListener('wheel', preventZoom)
+      document.removeEventListener('keydown', preventZoom)
+    }
+  }, [])
+
+  return null
+}