fix(desktop): preserve artboard scroll bounds and fit zoom calculation

.changeset/fix-preview-scaling.md

@@ -0,0 +1,5 @@
+---
+'@open-codesign/desktop': patch
+---
+
+Preserve preview artboard scroll bounds at scaled zoom levels to prevent desktop and tablet previews from being clipped.

apps/desktop/src/renderer/src/components/PreviewPane.test.ts

@@ -13,6 +13,7 @@ import {
   previewArtboardStyle,
   previewPaneLayoutClasses,
   previewViewportDimensions,
+  scaledPreviewFrameStyle,
   scaleRectForZoom,
   stablePreviewSourceKey,
 } from './PreviewPane';
@@ -116,6 +117,15 @@ describe('preview artboard frame', () => {
       }),
     ).toBe(100);
   });
+
+  it('preserves scaled desktop dimensions as minimum scroll bounds', () => {
+    expect(scaledPreviewFrameStyle('desktop', 150)).toEqual({
+      width: '2160px',
+      height: '1350px',
+      minWidth: '2160px',
+      minHeight: '1350px',
+    });
+  });
 });
 
 describe('preview pane welcome state', () => {

apps/desktop/src/renderer/src/components/PreviewPane.tsx

@@ -167,6 +167,18 @@ export function previewArtboardFrameClass(): string {
   return ARTBOARD_FRAME_CLASS;
 }
 
+export function scaledPreviewFrameStyle(
+  viewport: PreviewSlotProps['viewport'],
+  zoom: number,
+): CSSProperties {
+  const frame = previewViewportDimensions(viewport);
+  const scale = zoom / 100;
+  const width = `${Math.round(frame.width * scale)}px`;
+  const height = `${Math.round(frame.height * scale)}px`;
+
+  return { width, height, minWidth: width, minHeight: height };
+}
+
 function ScaledPreviewFrame({
   viewport,
   zoom,
@@ -179,13 +191,7 @@ function ScaledPreviewFrame({
   const frame = previewViewportDimensions(viewport);
   const scale = zoom / 100;
   return (
-    <div
-      className="relative flex-shrink-0"
-      style={{
-        width: `${frame.width * scale}px`,
-        height: `${frame.height * scale}px`,
-      }}
-    >
+    <div className="relative flex-shrink-0" style={scaledPreviewFrameStyle(viewport, zoom)}>
       <div
         className="origin-top-left"
         style={{