Update

resources/js/modules/editor/utils/layout-constants.ts

@@ -0,0 +1,67 @@
+// Shared layout constants for the editor
+export const LAYOUT_CONSTANTS = {
+  // Fixed element heights
+  HEADER_HEIGHT: 64, // Header with padding
+  CONTROLS_HEIGHT: 48, // Button controls height
+
+  // Canvas dimensions
+  CANVAS_WIDTH: 720,
+  CANVAS_HEIGHT: 1280,
+  CANVAS_ASPECT_RATIO: 720 / 1280, // 9:16 aspect ratio
+
+  // Spacing and padding
+  MIN_PADDING: 16, // Minimum padding around elements
+  CONTAINER_SPACING: 16, // Space between header, canvas, and controls (space-y-4 = 16px)
+  CONTAINER_VERTICAL_PADDING: 24, // py-6 = 24px top + 24px bottom
+};
+
+// Calculate optimal maxWidth based on viewport dimensions
+export const calculateOptimalMaxWidth = (): number => {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  // Calculate total used height for fixed elements and spacing
+  const usedHeight =
+    LAYOUT_CONSTANTS.HEADER_HEIGHT +
+    LAYOUT_CONSTANTS.CONTROLS_HEIGHT +
+    (LAYOUT_CONSTANTS.CONTAINER_SPACING * 2) + // Space between elements
+    LAYOUT_CONSTANTS.CONTAINER_VERTICAL_PADDING + // py-6 padding
+    (LAYOUT_CONSTANTS.MIN_PADDING * 2); // Additional safety padding
+
+  const availableHeight = viewportHeight - usedHeight;
+  const availableWidth = viewportWidth - (LAYOUT_CONSTANTS.MIN_PADDING * 2);
+
+  // Calculate maxWidth based on both width and height constraints
+  const maxWidthFromHeight = availableHeight * LAYOUT_CONSTANTS.CANVAS_ASPECT_RATIO;
+  const maxWidthFromWidth = availableWidth;
+
+  // Use the smaller constraint to ensure everything fits
+  const optimalMaxWidth = Math.min(maxWidthFromHeight, maxWidthFromWidth);
+
+  // Ensure minimum viable size (but allow smaller if viewport is tiny)
+  const minViableWidth = 280;
+
+  return Math.max(optimalMaxWidth, Math.min(minViableWidth, availableWidth));
+};
+
+// Calculate responsive width based on optimal maxWidth
+export const calculateResponsiveWidth = (): number => {
+  const optimalMaxWidth = calculateOptimalMaxWidth();
+  const viewportWidth = window.innerWidth;
+  const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
+  const availableWidth = viewportWidth - padding;
+
+  return Math.min(availableWidth, optimalMaxWidth);
+};
+
+// Calculate responsive scale for canvas
+export const calculateResponsiveScale = (maxWidth: number): number => {
+  const viewportWidth = window.innerWidth;
+  const padding = LAYOUT_CONSTANTS.MIN_PADDING * 2;
+  const availableWidth = viewportWidth - padding;
+  const constrainedWidth = Math.min(availableWidth, maxWidth);
+  const scale = constrainedWidth / LAYOUT_CONSTANTS.CANVAS_WIDTH;
+
+  // Cap at 100% to avoid upscaling
+  return Math.min(scale, 1);
+};