Fix scale of legend on small devices

frontend/app/map/legend/legend.css

@@ -7,8 +7,7 @@
 	font-size: 12px;
 
 	opacity: .7;
-	transition: opacity .7s,transform .7s;
-	transform-origin: bottom right;
+	transition: opacity .7s;
 }
 
 .fm-map-legend .mobile-menu-button {
@@ -16,13 +15,11 @@
 }
 
 .fm-map-legend .panel {
-	overflow-y: auto;
-
-	/* Somehow Chrome shows a horizontal scrollbar with anything else than this */
-	overflow-x: hidden;
-
 	box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
 	margin-bottom: 0;
+
+	transition: transform .7s;
+	transform-origin: bottom right;
 }
 
 .fm-map-legend:hover {

frontend/app/map/legend/legend.js

@@ -81,23 +81,26 @@
 
 			function getMaxScale() {
 				var mapContainer = $(map.map.getContainer());
-				var toolbox = $(".fm-toolbox-content", map.el);
-				var toolboxHeight = 2 * (toolbox.offset().top - mapContainer.offset().top) + toolbox.outerHeight();
+				var legendContent = el.find(".panel");
+				var toolbox = $(".fm-toolbox", map.el);
+				var toolboxButton = toolbox.find(".mobile-menu-button");
+				var toolboxHeight = 2 * (toolbox.offset().top - mapContainer.offset().top) + (toolboxButton.is(":visible") ? toolboxButton : toolbox).outerHeight();
+				var maxHeight = mapContainer.outerHeight() - parseInt(el.css("bottom")) - toolboxHeight - el.find(".mobile-menu-button").outerHeight(true);
+				var maxWidth = mapContainer.outerWidth() - parseInt(el.css("right")) * 2;
 
-				var maxHeight = mapContainer.outerHeight() - parseInt(el.css("bottom")) - toolboxHeight;
-
-				var currentScaleMatch = el.css("transform").match(/scale\((.*?)\)/);
+				var currentScaleMatch = legendContent.css("transform").match(/scale\((.*?)\)/);
 				var currentScale = parseFloat(currentScaleMatch ? parseFloat(currentScaleMatch[1]) : 1);
-				var currentHeight = el.outerHeight() / currentScale;
+				var currentHeight = legendContent.outerHeight() / currentScale;
+				var currentWidth = legendContent.outerWidth() / currentScale;
 
-				return maxHeight / currentHeight;
+				return Math.min(maxHeight / currentHeight, maxWidth / currentWidth);
 			}
 
 			var style = $("<style></style>").appendTo("head");
 
 			function resize() {
 				var maxScale = getMaxScale();
-				style.text(".fm-map-legend{transform:scale(" + Math.min(maxScale, 1) + ")} .fm-map-legend:hover{transform:scale(" + maxScale + ")}");
+				style.text(".fm-map-legend .panel{transform:scale(" + Math.min(maxScale, 1) + ")} .fm-map-legend .panel:hover{transform:scale(" + maxScale + ")}");
 			}
 
 			function _allCombinations(fields, cb) {
@@ -119,6 +122,7 @@
 
 			resize();
 			scope.$watch(getMaxScale, resize);
+			scope.$watch("showXs", function(s) { s && setTimeout(resize, 0); })
 			$(window).resize(resize);
 
 			scope.toggleFilter = function(typeInfo, item) {

frontend/app/map/toolbox/toolbox.css

@@ -14,6 +14,10 @@
 	margin-left: auto;
 }
 
+.fm-toolbox .navbar {
+	margin-bottom: 0; /* So that the legend can calculate the height of the toolbox properly */
+}
+
 @media print {
 	.fm-toolbox {
 		display: none;