add comment for hooks

1 files changed, 28 insertions, 10 deletions

diff --git a/apps/web/src/hooks/use-disable-browser-zoom.ts b/apps/web/src/hooks/use-disable-browser-zoom.ts
index 215268ac..9467cb71 100644
--- a/apps/web/src/hooks/use-disable-browser-zoom.ts
+++ b/apps/web/src/hooks/use-disable-browser-zoom.ts
@@ -1,13 +1,32 @@
 import { useEffect } from "react";
 
+/**
+ * useDisableBrowserZoom
+ *
+ * This React hook prevents users from zooming in/out the browser window using keyboard shortcuts,
+ * mouse wheel, or gesture events (such as pinch-to-zoom on trackpads or touch devices).
+ *
+ * Typical use case: apps with fixed-size UIs, custom editors, or when zooming would break layout.
+ *
+ * NOTE: Disabling browser zoom may negatively affect accessibility and user experience.
+ * Use with caution, especially for public-facing applications.
+ */
 export const useDisableBrowserZoom = () => {
   useEffect(() => {
+    /**
+     * Prevents browser zoom when user holds Ctrl (or Cmd on Mac) and scrolls the mouse wheel.
+     */
     const handleWheel = (e: WheelEvent) => {
       if (e.ctrlKey) {
         e.preventDefault();
       }
     };
 
+    /**
+     * Prevents browser zoom via keyboard shortcuts:
+     * Ctrl/Cmd + '+', '-', '=', or '0' (reset zoom)
+     * Some keyboards emit '=' for '+' (without Shift).
+     */
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.ctrlKey) {
         const key = e.key;
@@ -17,23 +36,22 @@ export const useDisableBrowserZoom = () => {
       }
     };
 
+    /**
+     * Prevents pinch-zoom gestures on supported browsers (mainly Safari/macOS/iOS).
+     * gesturestart, gesturechange, and gestureend are non-standard and not supported everywhere.
+     */
     const handleGesture = (e: Event) => {
       e.preventDefault();
     };
 
+    // Attach event listeners (passive: false is required for preventDefault to work)
     window.addEventListener("wheel", handleWheel, { passive: false });
     window.addEventListener("keydown", handleKeyDown, { passive: false });
+    window.addEventListener("gesturestart", handleGesture, { passive: false });
+    window.addEventListener("gesturechange", handleGesture, { passive: false });
+    window.addEventListener("gestureend", handleGesture, { passive: false });
 
-    window.addEventListener("gesturestart", handleGesture, {
-      passive: false,
-    });
-    window.addEventListener("gesturechange", handleGesture, {
-      passive: false,
-    });
-    window.addEventListener("gestureend", handleGesture, {
-      passive: false,
-    });
-
+    // Cleanup listeners on unmount to avoid memory leaks
     return () => {
       window.removeEventListener("wheel", handleWheel);
       window.removeEventListener("keydown", handleKeyDown);