Attempt to fix notch detection (#368)

Author: cdauth

frontend/src/lib/components/leaflet-map/leaflet-map.vue

@@ -99,10 +99,10 @@
 		flex-grow: 1;
 		position: relative;
 
-		--fm-leaflet-map-container-margin-bottom: var(--facilmap-control-margin-bottom);
+		--fm-leaflet-map-inset-bottom: var(--facilmap-inset-bottom);
 
 		&.isNarrow.hasSearchBox {
-			--fm-leaflet-map-container-margin-bottom: 0px;
+			--fm-leaflet-map-inset-bottom: 0px;
 		}
 
 		.fm-leaflet-map-wrapper {
@@ -129,19 +129,19 @@
 
 			.leaflet-control-container {
 				> .leaflet-top {
-					top: var(--facilmap-control-margin-top, 0px);
+					top: var(--facilmap-inset-top, 0px);
 				}
 
 				> .leaflet-right {
-					right: var(--facilmap-control-margin-right, 0px);
+					right: var(--facilmap-inset-right, 0px);
 				}
 
 				> .leaflet-bottom {
-					bottom: var(--fm-leaflet-map-container-margin-bottom, 0px);
+					bottom: var(--fm-leaflet-map-inset-bottom, 0px);
 				}
 
 				> .leaflet-left {
-					left: var(--facilmap-control-margin-left, 0px);
+					left: var(--facilmap-inset-left, 0px);
 				}
 
 				> .fm-leaflet-center {
@@ -251,9 +251,9 @@
 
 		.fm-leaflet-map-narrow-attribution {
 			position: absolute;
-			top: var(--facilmap-control-margin-top, 0px);
-			left: var(--facilmap-control-margin-left, 0px);
-			max-width: calc(100% - 54px - var(--facilmap-control-margin-left, 0px) - var(--facilmap-control-margin-right, 0px));
+			top: var(--facilmap-inset-top, 0px);
+			left: var(--facilmap-inset-left, 0px);
+			max-width: calc(100% - 54px - var(--facilmap-inset-left, 0px) - var(--facilmap-inset-right, 0px));
 			opacity: 0;
 			transition: opacity 1s;
 			pointer-events: none;
@@ -329,8 +329,8 @@
 
 		.fm-logo {
 			position: absolute;
-			bottom: var(--fm-leaflet-map-container-margin-bottom, 0px);
-			left: calc(var(--facilmap-control-margin-left, 0px) - 25px);
+			bottom: var(--fm-leaflet-map-inset-bottom, 0px);
+			left: calc(var(--facilmap-inset-left, 0px) - 25px);
 			pointer-events: none;
 			overflow: hidden;
 			user-select: none;

frontend/src/lib/components/legend/legend.vue

@@ -74,16 +74,16 @@
 	.fm-legend-placeholder {
 		position: absolute;
 		pointer-events: none;
-		left: calc(10px + var(--facilmap-control-margin-left));
-		right: calc(10px + var(--facilmap-control-margin-right));
-		top: calc(69px + var(--facilmap-control-margin-top));
-		bottom: calc(25px + var(--facilmap-control-margin-bottom));
+		left: calc(10px + var(--facilmap-inset-left));
+		right: calc(10px + var(--facilmap-inset-right));
+		top: calc(69px + var(--facilmap-inset-top));
+		bottom: calc(25px + var(--facilmap-inset-bottom));
 	}
 
 	.fm-legend-absolute.fm-legend-absolute {
 		position: absolute;
-		right: calc(10px + var(--facilmap-control-margin-right));
-		bottom: calc(25px + var(--facilmap-control-margin-bottom));
+		right: calc(10px + var(--facilmap-inset-right));
+		bottom: calc(25px + var(--facilmap-inset-bottom));
 		max-width: 20rem;
 		z-index: 800;
 		transform-origin: bottom right;

frontend/src/lib/components/search-box/search-box.vue

@@ -236,9 +236,9 @@
 	.fm-search-box.fm-search-box {
 		&:not(.isNarrow) {
 			position: absolute;
-			top: calc(10px + var(--facilmap-control-margin-top)) !important; /* Override drag position from narrow mode */
-			left: calc(52px + var(--facilmap-control-margin-left));
-			max-height: calc(100% - 25px - var(--facilmap-control-margin-top) - var(--facilmap-control-margin-bottom));
+			top: calc(10px + var(--facilmap-inset-top)) !important; /* Override drag position from narrow mode */
+			left: calc(52px + var(--facilmap-inset-left));
+			max-height: calc(100% - 25px - var(--facilmap-inset-top) - var(--facilmap-inset-bottom));
 			min-width: 19rem;
 			min-height: 6rem;
 			width: 29.5rem;
@@ -277,8 +277,8 @@
 
 			> .card-header {
 				padding-top: 11px;
-				padding-left: var(--facilmap-control-margin-left, 0px);
-				padding-right: var(--facilmap-control-margin-right, 0px);
+				padding-left: var(--facilmap-inset-left, 0px);
+				padding-right: var(--facilmap-inset-right, 0px);
 				position: relative;
 				-webkit-touch-callout: none;
 				cursor: row-resize;
@@ -314,9 +314,9 @@
 			flex-direction: column;
 			min-height: 0;
 			overflow: auto;
-			margin-left: var(--facilmap-control-margin-left, 0px);
-			margin-right: var(--facilmap-control-margin-right, 0px);
-			margin-bottom: var(--facilmap-control-margin-bottom, 0px);
+			margin-left: var(--facilmap-inset-left, 0px);
+			margin-right: var(--facilmap-inset-right, 0px);
+			margin-bottom: var(--facilmap-inset-bottom, 0px);
 		}
 
 		> .card-header {

frontend/src/lib/components/toolbox/toolbox.vue

@@ -111,8 +111,8 @@
 <style lang="scss">
 	.fm-toolbox {
 		position: absolute;
-		top: calc(10px + var(--facilmap-control-margin-top));
-		right: calc(10px + var(--facilmap-control-margin-right));
+		top: calc(10px + var(--facilmap-inset-top));
+		right: calc(10px + var(--facilmap-inset-right));
 
 		&:hover {
 			z-index: 1000;

frontend/src/lib/components/ui/sidebar.vue

@@ -172,7 +172,7 @@
 			touch-action: pan-y !important;
 			transform: translateX(100%);
 			transition: transform 0.3s, box-shadow 0.3s;
-			padding: var(--facilmap-control-margin-top, 0px) var(--facilmap-control-margin-right, 0px) var(--facilmap-control-margin-bottom, 0px) 0;
+			padding: var(--facilmap-inset-top, 0px) var(--facilmap-inset-right, 0px) var(--facilmap-inset-bottom, 0px) 0;
 
 			> .navbar {
 				display: flex;

frontend/src/map/map.ejs

@@ -30,14 +30,19 @@
 
 			html {
 				height: 100%;
-				--facilmap-control-margin-top: env(safe-area-inset-top, 0px);
-				--facilmap-control-margin-right: env(safe-area-inset-right, 0px);
-				--facilmap-control-margin-bottom: env(safe-area-inset-bottom, 0px);
-				--facilmap-control-margin-left: env(safe-area-inset-left, 0px);
+			}
+
+			@supports(padding:max(0px)) {
+				html {
+					--facilmap-inset-top: env(safe-area-inset-top, 0px);
+					--facilmap-inset-right: env(safe-area-inset-right, 0px);
+					--facilmap-inset-bottom: env(safe-area-inset-bottom, 0px);
+					--facilmap-inset-left: env(safe-area-inset-left, 0px);
+				}
 			}
 
 			#loading {
-				padding: calc(var(--facilmap-control-margin-top, 0px) + 10px) calc(var(--facilmap-control-margin-right, 0px) + 10px) calc(var(--facilmap-control-margin-bottom, 0px) + 10px) calc(var(--facilmap-control-margin-left, 0px) + 10px);
+				padding: calc(var(--facilmap-inset-top, 0px) + 10px) calc(var(--facilmap-inset-right, 0px) + 10px) calc(var(--facilmap-inset-bottom, 0px) + 10px) calc(var(--facilmap-inset-left, 0px) + 10px);
 				font-size: 24.5px;
 				font-weight: 500;
 				color: #495057;