Fix preview panel dimensions to account for controls

1 files changed, 5 insertions, 3 deletions

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index b7e38cbc..af603e97 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -53,9 +53,11 @@ export function PreviewPanel() {
       let availableWidth, availableHeight;
 
       if (isExpanded) {
-        // Use full viewport when expanded
-        availableWidth = window.innerWidth;
-        availableHeight = window.innerHeight;
+        // Use full viewport when expanded, accounting for controls and margin
+        const controlsHeight = 80; // Approximate height of controls area
+        const marginSpace = 24; // m-3 = 12px on each side = 24px total
+        availableWidth = window.innerWidth - marginSpace;
+        availableHeight = window.innerHeight - controlsHeight - marginSpace;
       } else {
         container = containerRef.current.getBoundingClientRect();
         const computedStyle = getComputedStyle(containerRef.current);