fix(console): prevent default zoom behavior (#6854)

Prevent the default zoom behavior everywhere in the app. Since the explorer panel handles the zoom manually, sometimes users may end up zooming the whole app by mistake and end up with the explorer panel covering the whole screen. This is a big problem since users won't be able to zoom out of it.
winglang · Jul 5, 2024 · 08d367e · 08d367e
1 parent 7a0ea6f
commit 08d367e
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 1 deletion.
diff --git a/apps/wing-console/console/app/web/index.html b/apps/wing-console/console/app/web/index.html
@@ -3,7 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/x-icon" href="./favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
     <title>Wing Console</title>
     <link rel="stylesheet" href="./index.css" />
   </head>

diff --git a/apps/wing-console/console/ui/src/Console.tsx b/apps/wing-console/console/ui/src/Console.tsx
@@ -9,6 +9,7 @@ import {
 import type { Mode } from "@wingconsole/design-system";
 import type { Trace } from "@wingconsole/server";
 import { useEffect, useMemo, useState } from "react";
+import { useEvent } from "react-use";
 
 import { App } from "./App.js";
 import { AppContext } from "./AppContext.js";
@@ -138,6 +139,22 @@ export const Console = ({
     };
   }, [layout]);
 
+  // Prevent the default zoom behavior everywhere in the app.
+  // Since the explorer panel handles the zoom manually, sometimes
+  // users may end up zooming the whole app by mistake and end up
+  // with the explorer panel covering the whole screen. This is
+  // a big problem since users won't be able to zoom out of it.
+  useEvent(
+    "wheel",
+    (event) => {
+      if ((event as WheelEvent).ctrlKey) {
+        event.preventDefault();
+      }
+    },
+    document,
+    { passive: false },
+  );
+
   return (
     <AppContext.Provider
       value={{