prevent scroll; add skip button

src/routes/Viewer.svelte

@@ -35,8 +35,8 @@
     function handleResize() {
         if (!canvas || !container) return;
         requestAnimationFrame(() => {
-            const maxWidth = container.clientHeight * (16 / 9);
-            const maxHeight = container.clientWidth * (9 / 16);
+            const maxWidth = container.clientHeight * 16 / 9;
+            const maxHeight = container.clientWidth * 9 / 16;
             canvas.width = Math.min(container.clientWidth, maxWidth);
             canvas.height = Math.min(container.clientHeight, maxHeight);
         });

src/routes/Vote.svelte

@@ -138,14 +138,14 @@
     function handleResize() {
         requestAnimationFrame(() => {
             if (canvasA && containerA) {
-                const maxWidth = containerA.clientHeight;
-                const maxHeight = containerA.clientWidth;
+                const maxWidth = (containerA.clientHeight * 16) / 9;
+                const maxHeight = (containerA.clientWidth * 9) / 16;
                 canvasA.width = Math.min(containerA.clientWidth, maxWidth);
                 canvasA.height = Math.min(containerA.clientHeight, maxHeight);
             }
             if (canvasB && containerB) {
-                const maxWidth = containerB.clientHeight;
-                const maxHeight = containerB.clientWidth;
+                const maxWidth = (containerB.clientHeight * 16) / 9;
+                const maxHeight = (containerB.clientWidth * 9) / 16;
                 canvasB.width = Math.min(containerB.clientWidth, maxWidth);
                 canvasB.height = Math.min(containerB.clientHeight, maxHeight);
             }
@@ -189,4 +189,7 @@
             <button class="vote-button" on:click={() => vote("B")}>B is Better</button>
         </div>
     </div>
+    <div class="skip-container">
+        <button class="vote-button" on:click={() => loadScenes()}>Skip</button>
+    </div>
 {/if}

static/global.css

@@ -351,7 +351,7 @@ body {
 .voting-canvas {
     width: 100%;
     height: auto;
-    aspect-ratio: 1 / 1;
+    aspect-ratio: 16 / 9;
 }
 
 .viewer-canvas {
@@ -377,6 +377,11 @@ body {
     cursor: pointer;
 }
 
+.skip-container {
+    max-width: 50%;
+    margin: 0 auto;
+}
+
 .tabs {
     display: flex;
     justify-content: left;