From 2039f5d03d30a0b22e69187c3f101499504d0dff Mon Sep 17 00:00:00 2001
From: patrickzerhusen <patrick.zerhusen@endex-geodaten.de>
Date: Thu, 11 Jun 2026 17:10:19 +0200
Subject: [PATCH] fixed popup auto-position with padding

---
 public/js/app.js  | 24 +++++++++++++++++++-----
 public/styles.css | 14 +++++++++++++-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index 15ec4d6..8e2a246 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -488,11 +488,25 @@ function buildPopupHtml(feature) {
 function bindFeaturePopup(feature, layer) {
     const cat = CATEGORIES[feature.properties.category] || CATEGORIES.other;
 
-    // Dynamic Popup — rebuilt every Time the Popup opens
-    layer.bindPopup(function () { return buildPopupHtml(feature); }, { maxWidth: 320, minWidth: 240 });
+    // Popup Options — Mobile narrower with Header/Footer Padding
+    var mobile = window.innerWidth < 769;
+    var opts = {
+        maxWidth: mobile ? 280 : 320,
+        minWidth: mobile ? 200 : 240,
+        maxHeight: mobile ? 280 : 400,
+        autoPanPaddingTopLeft:     L.point(mobile ? 50 : 75, mobile ? 100 : 75),
+        autoPanPaddingBottomRight: L.point(mobile ? 50 : 75, mobile ? 50 : 75),
+        className: 'contribution-popup'
+    };
 
-    // Loads Comments when Popup opens
+    // Dynamic Popup — rebuilt every Time the Popup opens
+    layer.bindPopup(function () { return buildPopupHtml(feature); }, opts);
+
+    // Closes Sidebar on Mobile and loads Comments when Popup opens
     layer.on('popupopen', function () {
+        if (window.innerWidth < 769) {
+            sidebar.close();
+        }
         loadComments(feature.properties.contribution_id);
     });
 
@@ -1168,7 +1182,7 @@ function deleteComment(commentId, contributionId) {
     });
 }
 
-// Toggles Photo Visibility in Popup
+// Toggles Photo Visibility in Popup and updates Popup Position
 function togglePhoto(contributionId) {
     const container = document.getElementById('photo-container-' + contributionId);
     const label = document.getElementById('photo-label-' + contributionId);
@@ -1183,7 +1197,7 @@ function togglePhoto(contributionId) {
     }
 }
 
-// Toggles Comments Section Visibility in Popup
+// Toggles Comments Section Visibility in Popup and updates Popup Position
 function toggleComments(contributionId) {
     const section = document.getElementById('comments-section-' + contributionId);
     const toggle = document.getElementById('comments-toggle-' + contributionId);
diff --git a/public/styles.css b/public/styles.css
index 9116e55..8ba80be 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1353,4 +1353,16 @@ select.form-input { cursor: pointer; }
 
 @media (min-width: 769px) {
     :root { --map-side-padding: 8px; }
-}
\ No newline at end of file
+}
+
+/* ---------------------------------------------------------
+       6.3 Popup Content Height Limit on Mobile
+       Prevents Popup from growing beyond Screen when
+       Comments or Photos are toggled.
+       --------------------------------------------------------- */
+    .leaflet-popup-content {
+        max-height: 33vh;
+        max-width: 33vh;
+        overflow-y: auto;
+    }
+    
\ No newline at end of file