adding resizeable not draggable

Author: redbackspider77

app.js

@@ -359,26 +359,6 @@ document.getElementById('minimise-btn').addEventListener('click', () => {
   renderLeaderboard();
 });
 
-const dragEl = document.getElementById("draggable-wrapper");
-let isDragging = false, offsetX = 0, offsetY = 0;
-
-dragEl.addEventListener("mousedown", (e) => {
-  isDragging = true;
-  offsetX = e.clientX - dragEl.offsetLeft;
-  offsetY = e.clientY - dragEl.offsetTop;
-  dragEl.style.cursor = "grabbing";
-});
-
-document.addEventListener("mousemove", (e) => {
-  if (!isDragging) return;
-  dragEl.style.left = `${e.clientX - offsetX}px`;
-  dragEl.style.top = `${e.clientY - offsetY}px`;
-});
-
-document.addEventListener("mouseup", () => {
-  isDragging = false;
-  dragEl.style.cursor = "grab";
-});
 
 /*
 // Reload matches every 30 seconds

index.html

@@ -25,7 +25,7 @@ <h1>Welcome to the Year 8 Chess Tournament</h1>
     <div id="game-panel" style="display:none; text-align: center;">
       <h2>Your Current Game</h2>
       <button><a style="text-decoration: none; color: #fff;" id="game-link" href="#" target="_blank">Join Game</a></button><br><br>
-      <div id="draggable-wrapper" class="iframe-wrapper">
+      <div class="iframe-wrapper">
         <div class="iframe-loader"></div>
         <iframe id="userGame" src="" onload="hideIframeLoader(this)"></iframe>
       </div>      

style.css

@@ -92,11 +92,19 @@ iframe {
   }
 
 .iframe-wrapper {
-    width: 100%;
-    max-width: 370px;
-    aspect-ratio: 1 / 1;
-    margin: 0 auto;
-    position: relative;
+    resize: both;
+    overflow: auto;
+    width: 360px;
+    height: 370px; /* 360 board + ~10px for moves list if needed */
+    max-width: 100%;
+    max-height: 90vh;
+    min-width: 300px;
+    min-height: 300px;
+    margin: 1rem auto;
+    border: 1px solid #444;
+    border-radius: 8px;
+    background-color: #2e2e2e; /* Matches Lichess dark theme */
+    display: block;
   }
 
 #userGame {
@@ -105,25 +113,8 @@ iframe {
     border: none;
     border-radius: 8px;
     display: block;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    top: 0;
-    left: 0;
   }  
-
-#draggable-wrapper {
-    background-color: #2e2e2e;
-    max-width: 360px;
-    padding: 1rem;
-    border-radius: 8px;
-    box-shadow: 0 0 8px rgba(0,0,0,0.3);
-    position: absolute; /* needed for dragging */
-    top: 100px;
-    left: 100px;
-    cursor: grab;
-    z-index: 1000;
-  }  
-
+  
 .iframe-loader {
     position: absolute;
     top: 50%;