fullscreen

app.py

@@ -297,10 +297,12 @@ def score_from_distance_km(distance_km: float) -> float:
 def build_street_html(image_url: str) -> str:
     base = """
     <div id="image-container" style="position:relative;max-width:960px;margin:0 auto;">
-      <img id="street-image" src="__IMG_URL__" style="width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1)" />
-      <button id="fullscreen-btn" title="Toggle Fullscreen" style="position:absolute;top:10px;right:10px;z-index:10;background:rgba(0,0,0,0.5);border:none;color:white;padding:8px;border-radius:4px;cursor:pointer;line-height:0;">
-        <!-- SVG icon will be injected by JS -->
-      </button>
+      <div id="fullscreen-wrapper" style="position:relative; background-color: #000;">
+        <img id="street-image" src="__IMG_URL__" style="width:100%;height:auto;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,0.1);display:block;" />
+        <button id="fullscreen-btn" title="Toggle Fullscreen" style="position:absolute;top:10px;right:10px;z-index:10;background:rgba(0,0,0,0.5);border:none;color:white;padding:8px;border-radius:4px;cursor:pointer;line-height:0;">
+          <!-- SVG icon will be injected by JS -->
+        </button>
+      </div>
       <div id="mini-map-wrap" style="transition:all 0.3s ease;position:absolute;right:10px;bottom:10px;border:2px solid #fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.2);background:#fff;">
         <div id="mini-map" style="width:100%;height:100%;cursor:pointer"></div>
         <div id="map-controls" style="position:absolute;right:8px;top:8px;display:flex;gap:6px;z-index:5;">
@@ -599,17 +601,24 @@ APP_BOOT_JS = """
   function initFullscreenButtonIfPresent() {
     log('initFullscreenButtonIfPresent called');
     const btn = document.getElementById('fullscreen-btn');
+    const wrapper = document.getElementById('fullscreen-wrapper');
     const img = document.getElementById('street-image');
-    if (!btn || !img || btn.dataset.initialized === '1') return;
+    if (!btn || !wrapper || !img || btn.dataset.initialized === '1') return;
 
     const enterIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>';
     const exitIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 0-2-2h-3m-6 0H3a2 2 0 0 0-2 2v3"/></svg>';
 
     btn.innerHTML = enterIcon;
+    const originalImgStyle = {
+        width: img.style.width,
+        height: img.style.height,
+        objectFit: img.style.objectFit,
+        borderRadius: img.style.borderRadius,
+    };
 
     btn.addEventListener('click', () => {
       if (!document.fullscreenElement) {
-        img.requestFullscreen().catch(err => {
+        wrapper.requestFullscreen().catch(err => {
           log('Fullscreen error:', err);
         });
       } else {
@@ -618,14 +627,18 @@ APP_BOOT_JS = """
     });
 
     document.addEventListener('fullscreenchange', () => {
-      if (document.fullscreenElement === img) {
+      if (document.fullscreenElement === wrapper) {
         btn.innerHTML = exitIcon;
-        btn.style.position = 'fixed';
-        btn.style.zIndex = '2147483647';
+        img.style.width = '100%';
+        img.style.height = '100%';
+        img.style.objectFit = 'contain';
+        img.style.borderRadius = '0';
       } else {
         btn.innerHTML = enterIcon;
-        btn.style.position = 'absolute';
-        btn.style.zIndex = '10';
+        img.style.width = originalImgStyle.width;
+        img.style.height = originalImgStyle.height;
+        img.style.objectFit = originalImgStyle.objectFit;
+        img.style.borderRadius = originalImgStyle.borderRadius;
       }
     });