Responsive margins for header and minimap

Author: GGBRW

src/lib/Header.svelte

@@ -15,7 +15,7 @@
 <SharePanel bind:visible={sharePanelVisible}></SharePanel>
 
 <div
-	class="absolute top-5 left-5 z-999 rounded-[8px] bg-white px-3 py-3 text-[#336] shadow-lg"
+	class="absolute top-5 left-2 sm:left-5 z-999 rounded-[8px] bg-white px-3 py-3 text-[#336] shadow-lg"
 	onmouseenter={() => (buttonCollapse = false)}
 	onmouseleave={() => (buttonCollapse = true)}
 	role="button"

src/lib/Minimap.svelte

@@ -92,7 +92,7 @@
 </script>
 
 {#if visibleHistoricMaps.size}
-	<svg {width} {height} viewBox={viewBox.join(' ')} class="absolute top-2 right-8 z-998" style="filter: drop-shadow( 0px 0px 4px rgba(51, 51, 102, .5));">
+	<svg {width} {height} viewBox={viewBox.join(' ')} class="absolute top-2 z-998 right-2 sm:right-8" style="filter: drop-shadow( 0px 0px 4px rgba(51, 51, 102, .5));">
 		<!-- ARROW POINTING FROM SELECTED MAP TO MAP-PREVIEW-BOX -->
 		<g transform="scale(1, -1) translate(0, -{viewBox[1] * 2 + viewBox[3]})">
 			{#if clickedHistoricMap}