Added translations switch button

src/components/maps/Map.astro

@@ -4,6 +4,7 @@ import type { MapProps } from '@/types/Map';
 import MarkerCreator from './overlay/MarkerCreator.vue';
 import { t } from '@/i18n/store';
 import { getLangFromUrl } from '@/i18n/utils';
+import MapActions from './MapActions.astro';
 
 interface Props extends MapProps {}
 
@@ -26,10 +27,12 @@ const byText = t('common.by', lang)
 const seeMapText = t('maps.go-to-map', lang)
 ---
 
-<div class="world-wrapper">
-    <div id="world"></div>
-
-    <MarkerCreator client:only="vue" mapKey={mapKey} />
+<div class="map-wrapper">
+    <div class="world-wrapper">
+        <div id="world"></div>
+    
+        <MarkerCreator client:only="vue" mapKey={mapKey} />
+    </div>
 </div>
 
 <script
@@ -667,25 +670,24 @@ map.addEventListener('click', (event) => {
 <style lang="scss" define:vars={{ backgroundColor }}>
 html,
 body {
-    height: 100vh;
     margin: 0;
     position: relative;
 }
-
+.map-wrapper {
+    position: relative;
+    // display: grid;
+    // grid-template-columns: var(--sidebar-size) 1fr;
+}
+#world {
+    height: 100vh;
+    height: 100dvh;
+}
 .world-wrapper {
-    position: fixed;
-    inset: 0;
+    position: relative;
     z-index: 0;
     isolation: isolate;
-
-    #world {
-        height: 100%;
-        width: 100%;
-    }
 }
-
 .leaflet-container {
-    aspect-ratio: 1551 / 1605;
     background-color: var(--backgroundColor);
 }
 </style>