Adjustments based on feedback

src/utils/interaction.ts

@@ -8,10 +8,22 @@ export const calculateZoomDelta = (
   baseMultiplier = 0.001
 ): number => clamp(wheelDelta * baseMultiplier * accelerationFactor, -0.5, 0.5);
 
-export const calculateInitialViewport = (initialZoom: number): ViewportOffset => ({
-  x: (CONSTANTS.VIRTUAL_CANVAS_SIZE - window.innerWidth / initialZoom) / 2,
-  y: (CONSTANTS.VIRTUAL_CANVAS_SIZE - window.innerHeight / initialZoom) / 2,
-});
+export const calculateInitialViewport = (initialZoom: number): ViewportOffset => {
+  // When fully zoomed out, we want to see the entire content area
+  // The target distribution is sized to match the viewport at minimum zoom
+  // So at any higher zoom level, we need to position appropriately
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+  
+  // Center the viewport on the target area
+  const areaWidth = windowWidth / CONSTANTS.ZOOM_LEVELS.min;
+  const areaHeight = windowHeight / CONSTANTS.ZOOM_LEVELS.min;
+  
+  return {
+    x: (areaWidth - windowWidth / initialZoom) / 2,
+    y: (areaHeight - windowHeight / initialZoom) / 2
+  };
+};
 
 export const clampZoom = (zoom: number): number => 
   clamp(zoom, CONSTANTS.ZOOM_LEVELS.min, CONSTANTS.ZOOM_LEVELS.max);