feat: adjust zoom based on screen width

Author: QuiiBz

apps/dashboard/src/components/EditorToolbar.tsx

@@ -99,15 +99,15 @@ export function EditorToolbar() {
       </Card>
       <Card variant="classic">
         <Flex align="center" gap="4">
-          <Tooltip content="Zoom Out">
+          <Tooltip content="Zoom In">
             <IconButton
               color="gray"
               onClick={() => {
-                zoomOut();
+                zoomIn();
               }}
               variant="ghost"
             >
-              <ZoomOutIcon height="1.4em" width="1.4em" />
+              <ZoomInIcon height="1.4em" width="1.4em" />
             </IconButton>
           </Tooltip>
           <Separator orientation="vertical" />
@@ -116,15 +116,15 @@ export function EditorToolbar() {
             {zoom}%
           </Text>
           <Separator orientation="vertical" />
-          <Tooltip content="Zoom In">
+          <Tooltip content="Zoom Out">
             <IconButton
               color="gray"
               onClick={() => {
-                zoomIn();
+                zoomOut();
               }}
               variant="ghost"
             >
-              <ZoomInIcon height="1.4em" width="1.4em" />
+              <ZoomOutIcon height="1.4em" width="1.4em" />
             </IconButton>
           </Tooltip>
         </Flex>

apps/dashboard/src/components/OgEditor.tsx

@@ -5,9 +5,9 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import type { OGElement } from "../lib/types";
 import { createDefaultElement, createElementId } from "../lib/elements";
-import { useZoomStore } from "../stores/zoomStore";
 import { useElementsStore } from "../stores/elementsStore";
 import { useImagesStore } from "../stores/imagesStore";
+import { useAdjustedZoom } from "../lib/hooks/useAdjustedZoom";
 import { Element } from "./Element";
 import { RightPanel } from "./RightPanel";
 import { LeftPanel } from "./LeftPanel";
@@ -25,7 +25,6 @@ let elementIdToCopy: string | undefined;
 export function OgEditor({ imageId, width, height }: OgProviderProps) {
   const router = useRouter();
   const rootRef = useRef<HTMLDivElement>(null);
-  const zoom = useZoomStore((state) => state.zoom);
   const {
     selectedElementId,
     setSelectedElementId,
@@ -39,6 +38,7 @@ export function OgEditor({ imageId, width, height }: OgProviderProps) {
   const setSelectedImageId = useImagesStore(
     (state) => state.setSelectedImageId,
   );
+  const adjustedZoom = useAdjustedZoom();
 
   /**
    * When the editor image is updated or loaded for the first time, reset every
@@ -288,7 +288,7 @@ export function OgEditor({ imageId, width, height }: OgProviderProps) {
           style={{
             width,
             height,
-            transform: `scale(${zoom / 100})`,
+            transform: `scale(${adjustedZoom})`,
             boxShadow: "var(--shadow-3)",
             backgroundColor: "var(--gray-1)",
           }}
@@ -308,7 +308,7 @@ export function OgEditor({ imageId, width, height }: OgProviderProps) {
           style={{
             width,
             height,
-            transform: `scale(${zoom / 100})`,
+            transform: `scale(${adjustedZoom})`,
             border: "1px solid var(--gray-contrast)",
           }}
         />

apps/dashboard/src/lib/hooks/useAdjustedZoom.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useZoomStore } from "../../stores/zoomStore";
+
+export function useAdjustedZoom() {
+  const zoom = useZoomStore((state) => state.zoom);
+  const [zoomFactor, setZoomFactor] = useState(1);
+
+  useEffect(() => {
+    function onResize() {
+      const screenWidth = window.innerWidth;
+      const editorWidth = 1200;
+      const editorWidthWithPanels = editorWidth + 300 * 2;
+
+      if (screenWidth < editorWidthWithPanels) {
+        setZoomFactor(screenWidth / (editorWidthWithPanels + 200));
+      } else {
+        setZoomFactor(1);
+      }
+    }
+
+    onResize();
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return (zoom / 100) * zoomFactor;
+}