Update

resources/js/modules/editor/partials/editor-canvas.tsx

@@ -1,72 +1,37 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
+import { LAYOUT_CONSTANTS, calculateResponsiveScale } from '../utils/layout-constants';
 
-// Move calculation outside the hook for best performance
-const calculateResponsiveScale = (maxWidth) => {
-    const viewportWidth = window.innerWidth;
-
-    // Very aggressive padding reduction for small screens
-    let padding = 0;
-
-    if (viewportWidth >= 340 && viewportWidth < 389) {
-        padding = 110;
-    }
-    else if (viewportWidth >= 390 && viewportWidth < 409) {
-        padding = 60;
-    }
-    else if (viewportWidth >= 410 && viewportWidth < 767) {
-        padding = 40;
-    }
-    else if (viewportWidth >= 768) {
-        padding = 0;
-    }
-
-
-
-    const availableWidth = viewportWidth - padding;
-    const constrainedWidth = Math.min(availableWidth, maxWidth);
-    const newScale = constrainedWidth / 720;
-
-
-    // Just cap at 100%, no minimum to avoid clipping
-    return Math.min(newScale, 1);
-};
-
-const useResponsiveCanvas = (maxWidth = 350) => {
-    const [scale, setScale] = useState(0.5);
+const useResponsiveCanvas = (maxWidth: number = 350) => {
+    const [scale, setScale] = useState(() => calculateResponsiveScale(maxWidth));
 
     useLayoutEffect(() => {
         setScale(calculateResponsiveScale(maxWidth));
     }, [maxWidth]);
 
     useEffect(() => {
-        // Update immediately
-        setScale(calculateResponsiveScale(maxWidth));
-
-        // Create event handlers inside effect
         const handleResize = () => {
             setScale(calculateResponsiveScale(maxWidth));
         };
 
-        // Multiple event listeners for better coverage
+        // Update immediately
+        handleResize();
+
+        // Event listeners
         window.addEventListener('resize', handleResize);
         window.addEventListener('orientationchange', handleResize);
 
-        // ResizeObserver for more reliable detection in dev tools
-        let resizeObserver;
+        // ResizeObserver for more reliable detection
+        let resizeObserver: ResizeObserver | undefined;
         if (window.ResizeObserver) {
-            resizeObserver = new ResizeObserver(() => {
-                setScale(calculateResponsiveScale(maxWidth));
-            });
+            resizeObserver = new ResizeObserver(handleResize);
             resizeObserver.observe(document.body);
         }
 
-        // MutationObserver to catch when dev tools changes the viewport
-        let mutationObserver;
+        // MutationObserver for dev tools detection
+        let mutationObserver: MutationObserver | undefined;
         if (window.MutationObserver) {
             mutationObserver = new MutationObserver(() => {
-                setTimeout(() => {
-                    setScale(calculateResponsiveScale(maxWidth));
-                }, 50);
+                setTimeout(handleResize, 50);
             });
             mutationObserver.observe(document.documentElement, {
                 attributes: true,
@@ -85,12 +50,14 @@ const useResponsiveCanvas = (maxWidth = 350) => {
     return scale;
 };
 
-const EditorCanvas = ({maxWidth = 350}) => {
+interface EditorCanvasProps {
+    maxWidth?: number;
+}
+
+const EditorCanvas: React.FC<EditorCanvasProps> = ({maxWidth = 350}) => {
     const scale = useResponsiveCanvas(maxWidth);
-    const canvasWidth = 720;
-    const canvasHeight = 1280;
-    const displayWidth = canvasWidth * scale;
-    const displayHeight = canvasHeight * scale;
+    const displayWidth = LAYOUT_CONSTANTS.CANVAS_WIDTH * scale;
+    const displayHeight = LAYOUT_CONSTANTS.CANVAS_HEIGHT * scale;
 
     const convertCoordinates = (e) => {
         const rect = e.currentTarget.getBoundingClientRect();
@@ -111,14 +78,15 @@ const EditorCanvas = ({maxWidth = 350}) => {
                 <div
                     className="border rounded-3xl bg-white shadow-sm origin-top-left"
                     style={{
-                        width: `${canvasWidth}px`,
-                        height: `${canvasHeight}px`,
+                        width: `${LAYOUT_CONSTANTS.CANVAS_WIDTH}px`,
+                        height: `${LAYOUT_CONSTANTS.CANVAS_HEIGHT}px`,
                         transform: `scale(${scale})`,
                     }}
                     onClick={(e) => {
                         const { x, y } = convertCoordinates(e);
                         // Handle your canvas interactions here
                         // x, y are the actual canvas coordinates (0-720, 0-1280)
+                        console.log(`Canvas coordinates: x=${x}, y=${y}`);
                     }}
                 >
                     {/* Your canvas content goes here */}

resources/js/modules/editor/partials/editor-header.tsx

@@ -7,14 +7,14 @@ const EditorHeader = (
     {className = ''}
 ) => {
   return (
-      <div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm w-full", className)}>
+      <div className={cn("bg-white rounded-xl p-2 flex items-center justify-between shadow-sm w-full", className)}>
       <Button variant="outline" size="icon" className="rounded">
         <Menu className="h-8 w-8" />
       </Button>
 
         <h1 className="text-xl font-display tracking-wide ml-3">MEMEAIGEN</h1>
 
-        <Button variant="outline" className="rounded-full inline-flex gap-1">
+        <Button variant="outline" className="rounded inline-flex gap-1">
         <span className="text-sm font-semibold">100</span>
         <CoinIcon className="w-8 h-8" />
         </Button>