From b555d65ea60d4f1ddd49b67fe4432edfa598c566 Mon Sep 17 00:00:00 2001
From: WOGGER7 <saneenmecheri@gmail.com>
Date: Mon, 21 Jul 2025 14:32:41 +0530
Subject: [PATCH] Fix preview panel dimensions to account for controls

---
 apps/web/src/components/editor/preview-panel.tsx | 8 +++++---
 1 file 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);