*

2 files changed, 20 insertions, 6 deletions

diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html
index 1aaadd0..ae6b0b4 100644
--- a/js/leibovitz/index.html
+++ b/js/leibovitz/index.html
@@ -50,6 +50,8 @@
         .side-control {
             position: absolute;
             top: 50%;
+            height: 100%;
+            width: auto;
             transform: translateY(-50%);
             display: flex;
             flex-direction: column;
@@ -60,7 +62,6 @@
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
             z-index: 10;
-            width: 40px;
         }
         .side-control.left {
             left: 0;
diff --git a/js/leibovitz/leibovitz.js b/js/leibovitz/leibovitz.js
index 4174d2b..c029d50 100644
--- a/js/leibovitz/leibovitz.js
+++ b/js/leibovitz/leibovitz.js
@@ -15,17 +15,30 @@ BlurManager.init();
 
 // Set the canvas dimensions to match the window size
 function updateCanvasSize() {
-    const containerWidth = window.innerWidth * 0.7; // 70% of viewport width
+    // Get the container dimensions
+    const container = document.querySelector('.preview-container');
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
     
     // If video is playing, use its aspect ratio
     if (video.videoWidth && video.videoHeight) {
         const videoAspect = video.videoWidth / video.videoHeight;
-        canvas.width = containerWidth;
-        canvas.height = containerWidth / videoAspect;
+        const containerAspect = containerWidth / containerHeight;
+        
+        // Determine dimensions that maintain aspect ratio while fitting in container
+        if (containerAspect > videoAspect) {
+            // Container is wider than video
+            canvas.height = containerHeight;
+            canvas.width = containerHeight * videoAspect;
+        } else {
+            // Container is taller than video
+            canvas.width = containerWidth;
+            canvas.height = containerWidth / videoAspect;
+        }
     } else {
-        // Default to container width and 4:3 aspect ratio until video starts
+        // Default to container dimensions until video starts
         canvas.width = containerWidth;
-        canvas.height = containerWidth * (3/4);
+        canvas.height = containerHeight;
     }
 }