Fixed mobile functionality

Author: MarcelBostelaar

js/shared.js

@@ -114,6 +114,7 @@ canvas.addEventListener('mousedown', (event) => {
     handleDragStart(event.clientX, event.clientY);
 });
 canvas.addEventListener('touchstart', (event) => {
+    console.log("Drag with touch!");
     //assume single touches
     touch = event.changedTouches[0];
     handleDragStart(touch.clientX, touch.clientY);

style/style.css

@@ -6,6 +6,7 @@
     max-width: 80vw;
     max-height: 80vh;
     object-fit: contain;
+    touch-action: none;
 }
 
 main{
@@ -28,12 +29,20 @@ main{
     #controls{
         margin-left: 10vw;
     }
+
+    #imageInput{
+        max-width: 15vw;
+    }
 }
 
 @media (max-width: 768px) {
     main {
         flex-direction: column; /* Change to column layout for mobile */
     }
+
+    #imageInput{
+        max-width: 40vw;
+    }
 }