fix slider position

Author: peelar

components/playground-workspace.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback, useState } from "react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { Monitor, Smartphone } from "lucide-react";
 import { CoverPreview } from "@/components/cover-preview";
@@ -56,10 +57,21 @@ export function PlaygroundWorkspace({
   const [orientation, setOrientation] = useAtom(orientationAtom);
   const config = useAtomValue(configAtom);
   const setConfig = useSetAtom(configAtom);
+  const [bottomWhitespace, setBottomWhitespace] = useState(0);
 
   // Code snippet uses fluid layout (content-based sizing)
   const useFluidLayout = config.layoutId === "code-snippet";
 
+  const handleViewportMetricsChange = useCallback(
+    (metrics: { bottomWhitespace: number }) => {
+      const nextValue = Math.round(metrics.bottomWhitespace);
+      setBottomWhitespace((previousValue) =>
+        previousValue === nextValue ? previousValue : nextValue
+      );
+    },
+    []
+  );
+
   const handleOrientationChange = (newOrientation: Orientation) => {
     // Check if current layout supports new orientation
     const currentDef = getLayoutDefinition(config.layoutId);
@@ -175,6 +187,7 @@ export function PlaygroundWorkspace({
             isLoading={isAnalyzingColors}
             loadingText="Analyzing colors..."
             fluidLayout={useFluidLayout}
+            onViewportMetricsChange={handleViewportMetricsChange}
           >
             <CoverPreview />
           </PreviewViewport>
@@ -188,7 +201,16 @@ export function PlaygroundWorkspace({
         </div>
 
         {!useFluidLayout && (
-          <ScreenshotZoomSlider value={screenshotZoom} onChange={setScreenshotZoom} />
+          <div
+            className="relative z-10"
+            style={
+              bottomWhitespace
+                ? { transform: `translateY(-${bottomWhitespace}px)` }
+                : undefined
+            }
+          >
+            <ScreenshotZoomSlider value={screenshotZoom} onChange={setScreenshotZoom} />
+          </div>
         )}
       </div>
     </div>

components/preview-viewport.tsx

@@ -12,6 +12,14 @@ interface PreviewViewportProps {
   isLoading?: boolean;
   loadingText?: string;
   fluidLayout?: boolean; // For content-based sizing (code snippet)
+  onViewportMetricsChange?: (metrics: {
+    scale: number;
+    containerWidth: number;
+    containerHeight: number;
+    scaledWidth: number;
+    scaledHeight: number;
+    bottomWhitespace: number;
+  }) => void;
 }
 
 const DEFAULT_SURFACE = {
@@ -27,12 +35,31 @@ export function PreviewViewport({
   isLoading = false,
   loadingText = "Loading...",
   fluidLayout = false,
+  onViewportMetricsChange,
 }: PreviewViewportProps) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [scale, setScale] = useState(1);
   const [hasMeasured, setHasMeasured] = useState(false);
   const rafRef = useRef<number | undefined>(undefined);
 
+  const reportMetrics = useCallback(
+    (nextScale: number, containerWidth: number, containerHeight: number) => {
+      const scaledWidth = surfaceWidth * nextScale;
+      const scaledHeight = surfaceHeight * nextScale;
+      const bottomWhitespace = Math.max(0, containerHeight - scaledHeight);
+
+      onViewportMetricsChange?.({
+        scale: nextScale,
+        containerWidth,
+        containerHeight,
+        scaledWidth,
+        scaledHeight,
+        bottomWhitespace,
+      });
+    },
+    [onViewportMetricsChange, surfaceHeight, surfaceWidth]
+  );
+
   // Throttled scale update using requestAnimationFrame
   const updateScale = useCallback(() => {
     if (rafRef.current) return; // Already scheduled
@@ -42,17 +69,18 @@ export function PreviewViewport({
       if (!containerRef.current) return;
       const containerWidth = containerRef.current.clientWidth;
       const containerHeight = containerRef.current.clientHeight;
-      if (!containerWidth || !containerHeight || !surfaceWidth || !surfaceHeight) return;
+      if (!containerWidth || !surfaceWidth || !surfaceHeight) return;
 
       // Scale to fit both width and height, ensuring entire canvas is visible without scrolling
       const scaleX = containerWidth / surfaceWidth;
-      const scaleY = containerHeight / surfaceHeight;
+      const scaleY = containerHeight ? containerHeight / surfaceHeight : Number.POSITIVE_INFINITY;
       const nextScale = Math.min(scaleX, scaleY, 1);
 
       setScale(nextScale);
       setHasMeasured(true);
+      reportMetrics(nextScale, containerWidth, containerHeight);
     });
-  }, [surfaceWidth, surfaceHeight]);
+  }, [surfaceWidth, surfaceHeight, reportMetrics]);
 
   useLayoutEffect(() => {
     if (fluidLayout) {
@@ -66,13 +94,14 @@ export function PreviewViewport({
     // Initial scale calculation - fit both width and height
     const containerWidth = node.clientWidth;
     const containerHeight = node.clientHeight;
-    if (containerWidth && containerHeight && surfaceWidth && surfaceHeight) {
+    if (containerWidth && surfaceWidth && surfaceHeight) {
       const scaleX = containerWidth / surfaceWidth;
-      const scaleY = containerHeight / surfaceHeight;
+      const scaleY = containerHeight ? containerHeight / surfaceHeight : Number.POSITIVE_INFINITY;
       const nextScale = Math.min(scaleX, scaleY, 1);
 
       setScale(nextScale);
       setHasMeasured(true);
+      reportMetrics(nextScale, containerWidth, containerHeight);
     }
 
     const observer = new ResizeObserver(updateScale);
@@ -82,7 +111,7 @@ export function PreviewViewport({
       observer.disconnect();
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
-  }, [surfaceWidth, surfaceHeight, updateScale, fluidLayout]);
+  }, [surfaceWidth, surfaceHeight, updateScale, fluidLayout, reportMetrics]);
 
   // Fluid layout: content determines size, no fixed canvas
   if (fluidLayout) {