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;">
+        <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>
       <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,8 +601,8 @@ APP_BOOT_JS = """
   function initFullscreenButtonIfPresent() {
     log('initFullscreenButtonIfPresent called');
     const btn = document.getElementById('fullscreen-btn');
-    const img = document.getElementById('street-image');
-    if (!btn || !img || btn.dataset.initialized === '1') return;
+    const wrapper = document.getElementById('fullscreen-wrapper');
+    if (!btn || !wrapper || 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>';
@@ -609,7 +611,7 @@ APP_BOOT_JS = """
 
     btn.addEventListener('click', () => {
       if (!document.fullscreenElement) {
-        img.requestFullscreen().catch(err => {
+        wrapper.requestFullscreen().catch(err => {
           log('Fullscreen error:', err);
         });
       } else {
@@ -618,7 +620,7 @@ APP_BOOT_JS = """
     });
 
     document.addEventListener('fullscreenchange', () => {
-      if (document.fullscreenElement === img) {
+      if (document.fullscreenElement === wrapper) {
         btn.innerHTML = exitIcon;
       } else {
         btn.innerHTML = enterIcon;