From 337344b197c1529dde8f6419b75df98f11d0b5f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?PROFERIS=20-=20Mi=C2=B3osz=20Stocki?=
 <milosz.stocki@proferis.pl>
Date: Wed, 15 Jul 2026 14:43:35 +0200
Subject: [PATCH] fix mobile layout #28

---
 web/js/sections/board-control.js | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/web/js/sections/board-control.js b/web/js/sections/board-control.js
index 7d42ee4..9bd0a4c 100644
--- a/web/js/sections/board-control.js
+++ b/web/js/sections/board-control.js
@@ -93,18 +93,22 @@ function buildHTML() {
         display: flex;
         flex-direction: column;
       }
+      .fullscreen-card #map-wrapper {
+        align-items: center !important;
+      }
       .fullscreen-card #map-container {
-        max-width: none !important;
-        height: 100% !important;
-        display: flex;
-        align-items: center;
-        justify-content: center;
+        max-width: 100% !important;
+        width: min(100%, calc((100vh - 90px) * (var(--w) / var(--h)))) !important;
+        height: auto !important;
+        aspect-ratio: calc(var(--w) / var(--h)) !important;
+        display: block !important;
       }
       .fullscreen-card #bg-image {
-        max-height: 100%;
-        width: auto !important;
-        max-width: 100%;
-        object-fit: contain;
+        width: 100% !important;
+        height: 100% !important;
+        object-fit: fill !important;
+        max-width: none !important;
+        max-height: none !important;
       }
     </style>
 
@@ -129,7 +133,7 @@ function buildHTML() {
             </div>
           </div>
           
-          <div style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
+          <div id="map-wrapper" style="flex:1; display:flex; align-items:flex-start; justify-content:center; overflow:hidden;">
             <div id="map-container" style="position: relative; width: 100%; max-width: 800px; background: #111; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
               <img id="bg-image" src="web/assets/backgrounds/${currentBg}/bg.svg" style="width: 100%; display: block; height: auto; border-radius: 8px;" />
               <div id="markers-layer" style="position: absolute; top:0; left:0; width:100%; height:100%;"></div>
@@ -328,7 +332,8 @@ function renderSpots() {
 
   const w = bounds.xMax - bounds.xMin;
   const h = bounds.yMax - bounds.yMin;
-  // mapContainer.style.aspectRatio = `${w}/${h}`; // Let natural image aspect ratio dictate container height
+  mapContainer.style.setProperty('--w', w);
+  mapContainer.style.setProperty('--h', h);
   
   listEl.innerHTML = '';
   markersEl.innerHTML = '';