Fix popup hovering (bubbling)

masks/project.html

@@ -628,7 +628,12 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
 		});
 
 		//Open tooltip on latest message in mobile mode
-		if(iKey === (aoMessages.length - 1) && self.vars(['project', 'mode']) == self.consts.modes.blog && (!oMsg.medias || oMsg.medias.length < 3) && isMobile()) oMarker.openPopup();
+		if(
+			iKey === (aoMessages.length - 1) &&
+			self.vars(['project', 'mode']) == self.consts.modes.blog &&
+			(!oMsg.medias || oMsg.medias.length < 3) &&
+			isMobile()
+		) oMarker.openPopup();
 
 		oSpot.tmp(['markers', oMsg.id_message], oMarker);
 	});

style/_leaflet.scss

@@ -16,11 +16,18 @@ $stroke-width-axis : 2;
 .leaflet-container {
 	background: none;
 }
-.leaflet-popup-content-wrapper {
-	border-radius: 5px;
-}
-.leaflet-popup-content {
-	margin: 1rem;
+
+.leaflet-popup {
+	padding-bottom: 60px;
+	margin-bottom: -40px;
+
+	.leaflet-popup-content-wrapper {
+		border-radius: 5px;
+
+		.leaflet-popup-content {
+			margin: 1rem;
+		}
+	}
 }
 
 .leaflet-control.spot-control, .leaflet-control .heightgraph-toggle {
@@ -29,7 +36,7 @@ $stroke-width-axis : 2;
 	width: 44px;
 	text-align: center;
 	box-shadow: none;
-	
+
 	.fa, .heightgraph-toggle-icon {
 		@extend .control-icon;
 	}
@@ -62,7 +69,7 @@ $stroke-width-axis : 2;
 	svg.heightgraph-container {
 		background: none;
 		border-radius: 0;
-		
+
 		.area {
 			@include drop-shadow(0.6);
 		}
@@ -71,11 +78,11 @@ $stroke-width-axis : 2;
 	.horizontalLine {
 		stroke-width: 2px;
 	}
-	
+
 	.heightgraph-toggle {
 		height: 44px;
 		background: none;
-		
+
 		.heightgraph-toggle-icon {
 			@extend .fa-elev-chart;
 			position: static;
@@ -92,4 +99,4 @@ $stroke-width-axis : 2;
 		line-height: 28px;
 		display: none;
 	}
-}
+}