pans map if popup behind header

public/js/app.js

@@ -494,8 +494,8 @@ function bindFeaturePopup(feature, layer) {
         maxWidth: mobile ? 280 : 320,
         minWidth: mobile ? 200 : 240,
         maxHeight: mobile ? 280 : 400,
-        autoPanPaddingTopLeft:     L.point(mobile ? 50 : 75, mobile ? 100 : 75),
+        autoPanPaddingTopLeft:     L.point(mobile ? 50 : 75, mobile ? 75 : 75),
-        autoPanPaddingBottomRight: L.point(mobile ? 50 : 75, mobile ? 50 : 75),
+        autoPanPaddingBottomRight: L.point(mobile ? 60 : 85, mobile ? 50 : 75),
         className: 'contribution-popup'
     };
 
@@ -1182,6 +1182,23 @@ function deleteComment(commentId, contributionId) {
     });
 }
 
+// Pans Map if Popup behind Header
+function recenterPopup() {
+    map.eachLayer(function (layer) {
+        if (layer.getPopup && layer.getPopup() && layer.isPopupOpen()) {
+            var popupEl = layer.getPopup().getElement();
+            if (!popupEl) return;
+            var padding = window.innerWidth < 769 ? 75 : 75;
+            var popupTop = popupEl.getBoundingClientRect().top;
+            var mapTop = document.getElementById('map').getBoundingClientRect().top;
+            var diff = popupTop - mapTop - padding;
+            if (diff < 0) {
+                map.panBy([0, diff], { animate: true, duration: 0.3 });
+            }
+        }
+    });
+}
+
 // Toggles Photo Visibility in Popup and updates Popup Position
 function togglePhoto(contributionId) {
     const container = document.getElementById('photo-container-' + contributionId);
@@ -1195,6 +1212,8 @@ function togglePhoto(contributionId) {
         container.style.display = 'none';
         label.textContent = 'Foto anzeigen';
     }
+
+    setTimeout(recenterPopup, 150);
 }
 
 // Toggles Comments Section Visibility in Popup and updates Popup Position
@@ -1214,6 +1233,8 @@ function toggleComments(contributionId) {
         toggle.classList.remove('fa-chevron-up');
         toggle.classList.add('fa-chevron-down');
     }
+
+    setTimeout(recenterPopup, 150);
 }
 
 

public/styles.css

@@ -695,8 +695,6 @@ select.form-input { cursor: pointer; }
 }
 
 .popup-comments-list {
-    max-height: 150px;
-    overflow-y: auto;
     margin-top: var(--space-sm);
 }
 
@@ -1361,7 +1359,7 @@ select.form-input { cursor: pointer; }
        Comments or Photos are toggled.
        --------------------------------------------------------- */
     .leaflet-popup-content {
-        max-height: 33vh;
+        max-height: 50vh;
         max-width: 33vh;
         overflow-y: auto;
     }