diff --git a/apps/wing-console/console/app/web/index.html b/apps/wing-console/console/app/web/index.html
index 4c6f909e7d2..c815596fa4a 100644
--- a/apps/wing-console/console/app/web/index.html
+++ b/apps/wing-console/console/app/web/index.html
@@ -3,7 +3,10 @@
-
+
Wing Console
diff --git a/apps/wing-console/console/ui/src/Console.tsx b/apps/wing-console/console/ui/src/Console.tsx
index 8005b0aaa88..5d13294da3e 100644
--- 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 (