diff --git a/src/modules/infobox/FeatureElevationProfilePlotOpenLayersBridge.vue b/src/modules/infobox/FeatureElevationProfilePlotOpenLayersBridge.vue
new file mode 100644
index 000000000..2d163d9f9
--- /dev/null
+++ b/src/modules/infobox/FeatureElevationProfilePlotOpenLayersBridge.vue
@@ -0,0 +1,68 @@
+<template>
+    <slot />
+</template>
+<script>
+import { LV95, WEBMERCATOR } from '@/utils/coordinateSystems'
+import { FeatureStyleColor, RED } from '@/utils/featureStyleUtils'
+import Overlay from 'ol/Overlay'
+import proj4 from 'proj4'
+
+export default {
+    inject: ['getMap'],
+    props: {
+        coordinates: {
+            type: Array,
+            default: null,
+        },
+        trackingPointColor: {
+            type: FeatureStyleColor,
+            default: RED,
+        },
+    },
+    watch: {
+        coordinates(newCoordinates) {
+            if (newCoordinates) {
+                this.currentHoverPosOverlay.setPosition(
+                    proj4(LV95.epsg, WEBMERCATOR.epsg, newCoordinates)
+                )
+                this.addHoverPositionOverlay()
+            } else {
+                this.currentHoverPosOverlay.setPosition(null)
+                this.removeHoverPositionOverlay()
+            }
+        },
+        trackingPointColor(newColor) {
+            this.currentHoverPosOverlay.getElement().style.backgroundColor = newColor.fill
+        },
+    },
+    mounted() {
+        // Overlay that shows the corresponding position on the OL map when hovering over the profile graph.
+        this.currentHoverPosOverlay = new Overlay({
+            element: document.createElement('div'),
+            positioning: 'center-center',
+            stopEvent: false,
+        })
+        // setting up a CSS class on the element so that we can style it (see below in the <style> section)
+        this.currentHoverPosOverlay.getElement().classList.add('profile-circle-current-hover-pos')
+        this.currentHoverPosOverlay.getElement().style.backgroundColor =
+            this.trackingPointColor.fill
+        if (this.coordinates) {
+            this.currentHoverPosOverlay.setPosition(
+                proj4(LV95.epsg, WEBMERCATOR.epsg, this.coordinates)
+            )
+            this.addHoverPositionOverlay()
+        }
+    },
+    unmounted() {
+        this.removeHoverPositionOverlay()
+    },
+    methods: {
+        addHoverPositionOverlay() {
+            this.getMap()?.addOverlay(this.currentHoverPosOverlay)
+        },
+        removeHoverPositionOverlay() {
+            this.getMap()?.removeOverlay(this.currentHoverPosOverlay)
+        },
+    },
+}
+</script>
diff --git a/src/modules/infobox/InfoboxModule.vue b/src/modules/infobox/InfoboxModule.vue
index 0e583325f..6024cec42 100644
--- a/src/modules/infobox/InfoboxModule.vue
+++ b/src/modules/infobox/InfoboxModule.vue
@@ -183,7 +183,7 @@ export default {
         },
 
         setMaxHeight() {
-            if (!this.showContainer) {
+            if (!this.showContainer || !this.$refs.content) {
                 return
             }
 
diff --git a/src/modules/infobox/components/FeatureElevationProfile.vue b/src/modules/infobox/components/FeatureElevationProfile.vue
index 0b3cd6cf6..c7bc82fcc 100644
--- a/src/modules/infobox/components/FeatureElevationProfile.vue
+++ b/src/modules/infobox/components/FeatureElevationProfile.vue
@@ -53,7 +53,6 @@ export default {
         FeatureElevationProfilePlot,
         FeatureElevationProfileInformation,
     },
-    inject: ['getMap'],
     props: {
         feature: {
             type: EditableFeature,
diff --git a/src/modules/infobox/components/FeatureElevationProfileInformation.vue b/src/modules/infobox/components/FeatureElevationProfileInformation.vue
index 28b628ff0..68811e12f 100644
--- a/src/modules/infobox/components/FeatureElevationProfileInformation.vue
+++ b/src/modules/infobox/components/FeatureElevationProfileInformation.vue
@@ -119,7 +119,7 @@ export default {
 @import 'src/scss/webmapviewer-bootstrap-theme';
 .profile-info-container {
     overflow-x: auto;
-    max-width: 100vw;
+    max-width: 100%;
 }
 .profile-popup-info-buttons {
     button {
diff --git a/src/modules/infobox/components/FeatureElevationProfilePlot.vue b/src/modules/infobox/components/FeatureElevationProfilePlot.vue
index e65e3aa47..40594ac94 100644
--- a/src/modules/infobox/components/FeatureElevationProfilePlot.vue
+++ b/src/modules/infobox/components/FeatureElevationProfilePlot.vue
@@ -1,8 +1,8 @@
 <template>
     <div
         ref="profileChartContainer"
-        @mouseenter="addHoverPositionOverlay"
-        @mouseleave="removeHoverPositionOverlay"
+        @mouseenter="startPositionTracking"
+        @mouseleave="stopPositionTracking"
     >
         <LineChart
             ref="chart"
@@ -47,19 +47,24 @@
                 class="profile-tooltip-arrow"
                 :style="tooltipArrowStyle"
             ></div>
+            <FeatureElevationProfilePlotOpenLayersBridge
+                v-if="!showIn3d"
+                :tracking-point-color="trackingPointColor"
+                :coordinates="pointBeingHovered?.coordinates"
+            />
+            <!--TODO BGDIINF_SB-2977 : create a position tracker for Cesium, similar to FeatureElevationProfilePlotOpenLayersBridge-->
         </div>
     </div>
 </template>
 
 <script>
 import ElevationProfile from '@/api/profile/ElevationProfile.class'
-import { LV95, WEBMERCATOR } from '@/utils/coordinateSystems'
+import FeatureElevationProfilePlotOpenLayersBridge from '@/modules/infobox/FeatureElevationProfilePlotOpenLayersBridge.vue'
 import { FeatureStyleColor } from '@/utils/featureStyleUtils'
 import { round } from '@/utils/numberUtils'
 import { resetZoom } from 'chartjs-plugin-zoom'
-import Overlay from 'ol/Overlay'
-import proj4 from 'proj4'
 import { Line as LineChart } from 'vue-chartjs'
+import { mapState } from 'vuex'
 
 const GAP_BETWEEN_TOOLTIP_AND_PROFILE = 12 //px
 
@@ -80,9 +85,9 @@ const GAP_BETWEEN_TOOLTIP_AND_PROFILE = 12 //px
  */
 export default {
     components: {
+        FeatureElevationProfilePlotOpenLayersBridge,
         LineChart,
     },
-    inject: ['getMap'],
     props: {
         elevationProfile: {
             type: ElevationProfile,
@@ -108,6 +113,9 @@ export default {
         }
     },
     computed: {
+        ...mapState({
+            showIn3d: (state) => state.ui.showIn3d,
+        }),
         tooltipStyle() {
             if (this.pointBeingHovered) {
                 const tooltipWidth = this.$refs.profileTooltip.clientWidth
@@ -264,7 +272,7 @@ export default {
                         this.clearHoverPosition()
                         return
                     }
-                    if (tooltip.dataPoints.length > 0) {
+                    if (tooltip.dataPoints.length > 0 && this.track) {
                         const point = tooltip.dataPoints[0]
                         const chartPosition = chart.canvas.getBoundingClientRect()
                         this.pointBeingHovered = {
@@ -351,33 +359,7 @@ export default {
             }
         },
     },
-    watch: {
-        /** Updating the tracking point color if the props with the color is changed */
-        trackingPointColor(newColor) {
-            this.currentHoverPosOverlay.getElement().style.backgroundColor = newColor.fill
-        },
-        pointBeingHovered(newPoint) {
-            if (newPoint) {
-                this.currentHoverPosOverlay.setPosition(
-                    proj4(LV95.epsg, WEBMERCATOR.epsg, newPoint.coordinates)
-                )
-            } else {
-                this.currentHoverPosOverlay.setPosition(null)
-            }
-        },
-    },
     mounted() {
-        /* Overlay that shows the corresponding position on the map when hovering over the profile
-        graph. */
-        this.currentHoverPosOverlay = new Overlay({
-            element: document.createElement('div'),
-            positioning: 'center-center',
-            stopEvent: false,
-        })
-        // setting up a CSS class on the element so that we can style it (see below in the <style> section)
-        this.currentHoverPosOverlay.getElement().classList.add('profile-circle-current-hover-pos')
-        this.currentHoverPosOverlay.getElement().style.backgroundColor =
-            this.trackingPointColor.fill
         this.$nextTick(() => {
             // sending an update event after Vue-ChartJS has been rendered, so that the parent container can be resized
             // to fit the canvas from Vue-ChartJS
@@ -385,9 +367,6 @@ export default {
             this.$emit('update')
         })
     },
-    unmounted() {
-        this.getMap().removeOverlay(this.currentHoverPosOverlay)
-    },
     methods: {
         startPositionTracking() {
             this.track = true
@@ -395,14 +374,6 @@ export default {
         stopPositionTracking() {
             this.track = false
         },
-        addHoverPositionOverlay() {
-            this.startPositionTracking()
-            this.getMap().addOverlay(this.currentHoverPosOverlay)
-        },
-        removeHoverPositionOverlay() {
-            this.stopPositionTracking()
-            this.getMap().removeOverlay(this.currentHoverPosOverlay)
-        },
         clearHoverPosition() {
             this.pointBeingHovered = null
         },
diff --git a/src/modules/map/MapModule.vue b/src/modules/map/MapModule.vue
index 7c1672617..8b57b843e 100644
--- a/src/modules/map/MapModule.vue
+++ b/src/modules/map/MapModule.vue
@@ -8,19 +8,35 @@
             <!-- So that external modules can have access to the map instance through the provided 'getMap' -->
             <slot />
             <LocationPopup />
+            <teleport :to="`#map-footer-${isPhoneMode ? 'mobile-' : ''}scale-line`">
+                <OpenLayersScale />
+            </teleport>
+            <teleport to="#map-footer-mouse-tracker">
+                <OpenLayersMouseTracker />
+            </teleport>
+            <teleport to="#toolbox-compass-button">
+                <OpenLayersCompassButton />
+            </teleport>
         </OpenLayersMap>
         <WarningRibbon />
     </div>
 </template>
 
 <script>
+import OpenLayersCompassButton from '@/modules/map/components/openlayers/OpenLayersCompassButton.vue'
+import OpenLayersMouseTracker from '@/modules/map/components/openlayers/OpenLayersMouseTracker.vue'
+import OpenLayersScale from '@/modules/map/components/openlayers/OpenLayersScale.vue'
+import { UIModes } from '@/store/modules/ui.store'
+import { defineAsyncComponent } from 'vue'
+import { mapState } from 'vuex'
 import LocationPopup from './components/LocationPopup.vue'
 import WarningRibbon from './components/WarningRibbon.vue'
-import { mapState } from 'vuex'
-import { defineAsyncComponent } from 'vue'
 
 export default {
     components: {
+        OpenLayersCompassButton,
+        OpenLayersMouseTracker,
+        OpenLayersScale,
         LocationPopup,
         WarningRibbon,
         OpenLayersMap: defineAsyncComponent(() =>
@@ -31,7 +47,11 @@ export default {
     computed: {
         ...mapState({
             is3DActive: (state) => state.ui.showIn3d,
+            uiMode: (state) => state.ui.mode,
         }),
+        isPhoneMode() {
+            return this.uiMode === UIModes.PHONE
+        },
     },
 }
 </script>
diff --git a/src/modules/map/components/cesium/CesiumMap.vue b/src/modules/map/components/cesium/CesiumMap.vue
index 4ce824836..d1edde6b4 100644
--- a/src/modules/map/components/cesium/CesiumMap.vue
+++ b/src/modules/map/components/cesium/CesiumMap.vue
@@ -134,8 +134,8 @@ export default {
     z-index: $zindex-map;
 
     .cesium-widget canvas {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
     }
 
     .cesium-viewer-bottom {
diff --git a/src/modules/map/components/footer/MapFooter.vue b/src/modules/map/components/footer/MapFooter.vue
index ff171a76f..5b17842f4 100644
--- a/src/modules/map/components/footer/MapFooter.vue
+++ b/src/modules/map/components/footer/MapFooter.vue
@@ -6,19 +6,15 @@
                 <div class="map-background-selector">
                     <MapFooterBackgroundSelector />
                 </div>
-                <MapFooterScale :current-zoom="zoom" class="scale-line-phone" />
+                <div id="map-footer-mobile-scale-line" />
             </div>
         </div>
         <div id="map-footer-middle" class="map-footer-middle">
-            <!-- Infobox, Profile, ... -->
+            <!-- teleport for: Infobox, Profile, ... -->
         </div>
         <div class="map-footer-bottom">
-            <MapFooterScale :current-zoom="zoom" />
-            <MapFooterProjection
-                :displayed-projection-id="displayedProjectionId"
-                @projection-change="setDisplayedProjectionWithId"
-            />
-            <MapFooterMousePosition :displayed-projection-id="displayedProjectionId" />
+            <div id="map-footer-scale-line" />
+            <div id="map-footer-mouse-tracker" class="d-flex gap-1 align-items-center" />
             <span class="map-footer-bottom-spacer" />
             <MapFooterAppVersion />
             <MapFooterAppCopyright />
@@ -28,13 +24,10 @@
 
 <script>
 import MapFooterAttributionList from '@/modules/map/components/footer/MapFooterAttributionList.vue'
-import { mapActions, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import MapFooterAppCopyright from './MapFooterAppCopyright.vue'
 import MapFooterAppVersion from './MapFooterAppVersion.vue'
 import MapFooterBackgroundSelector from './MapFooterBackgroundSelector.vue'
-import MapFooterMousePosition from './MapFooterMousePosition.vue'
-import MapFooterProjection from './MapFooterProjection.vue'
-import MapFooterScale from './MapFooterScale.vue'
 
 export default {
     components: {
@@ -42,33 +35,15 @@ export default {
         MapFooterAppCopyright,
         MapFooterAppVersion,
         MapFooterBackgroundSelector,
-        MapFooterMousePosition,
-        MapFooterProjection,
-        MapFooterScale,
     },
     computed: {
         ...mapState({
-            zoom: (state) => state.position.zoom,
             isFullscreenMode: (state) => state.ui.fullscreenMode,
-            displayedProjectionId: (state) => state.map.displayedProjection.id,
         }),
     },
-    methods: {
-        ...mapActions(['setDisplayedProjectionWithId']),
-    },
 }
 </script>
 
-<style lang="scss">
-@import 'src/scss/webmapviewer-bootstrap-theme';
-/* Must be unscoped, as the scaleLine is defined in the child component MapFooterScale.vue */
-.scale-line-phone .scale-line-inner {
-    /* If in phone mode, we need a background color, as the scale line is directly displayed on the
-    map in this case. */
-    background-color: rgba($white, 0.7);
-}
-</style>
-
 <style lang="scss" scoped>
 @import 'src/scss/media-query.mixin';
 @import 'src/scss/webmapviewer-bootstrap-theme';
@@ -105,12 +80,6 @@ $flex-gap: 1em;
         @include respond-above(tablet) {
             flex-direction: column-reverse;
         }
-        .scale-line-phone {
-            font-size: 0.6rem;
-            @include respond-above(phone) {
-                display: none;
-            }
-        }
     }
 
     &-middle {
diff --git a/src/modules/map/components/footer/MapFooterProjection.vue b/src/modules/map/components/footer/MapFooterProjection.vue
deleted file mode 100644
index 1e06fbcab..000000000
--- a/src/modules/map/components/footer/MapFooterProjection.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-    <select
-        class="map-projection form-control-xs"
-        :value="displayedProjectionId"
-        data-cy="mouse-position-select"
-        @change="onProjectionChange"
-    >
-        <option
-            v-for="projection in availableProjections"
-            :key="projection.id"
-            :value="projection.id"
-        >
-            {{ projection.label }}
-        </option>
-    </select>
-</template>
-
-<script>
-import allCoordinateSystems from '@/utils/coordinateSystems'
-
-export default {
-    inject: ['getMap'],
-    props: {
-        displayedProjectionId: {
-            type: String,
-            required: true,
-        },
-    },
-    emits: ['projectionChange'],
-    data() {
-        return {
-            availableProjections: allCoordinateSystems,
-        }
-    },
-    methods: {
-        onProjectionChange(event) {
-            this.$emit('projectionChange', event.target.value)
-        },
-    },
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'src/scss/media-query.mixin';
-
-.map-projection {
-    display: none;
-}
-@media (any-hover: hover) {
-    .map-projection {
-        display: block;
-    }
-}
-</style>
diff --git a/src/modules/menu/components/toolboxRight/CompassButton.vue b/src/modules/map/components/openlayers/OpenLayersCompassButton.vue
similarity index 100%
rename from src/modules/menu/components/toolboxRight/CompassButton.vue
rename to src/modules/map/components/openlayers/OpenLayersCompassButton.vue
diff --git a/src/modules/map/components/footer/MapFooterMousePosition.vue b/src/modules/map/components/openlayers/OpenLayersMouseTracker.vue
similarity index 65%
rename from src/modules/map/components/footer/MapFooterMousePosition.vue
rename to src/modules/map/components/openlayers/OpenLayersMouseTracker.vue
index 0a9665a9e..8c7b66f93 100644
--- a/src/modules/map/components/footer/MapFooterMousePosition.vue
+++ b/src/modules/map/components/openlayers/OpenLayersMouseTracker.vue
@@ -1,23 +1,41 @@
 <template>
+    <select
+        class="map-projection form-control-xs"
+        :value="displayedProjectionId"
+        data-cy="mouse-position-select"
+        @change="onProjectionChange"
+    >
+        <option
+            v-for="projection in availableProjections"
+            :key="projection.id"
+            :value="projection.id"
+        >
+            {{ projection.label }}
+        </option>
+    </select>
     <div ref="mousePosition" class="mouse-position" data-cy="mouse-position"></div>
 </template>
-
 <script>
 import allCoordinateSystems from '@/utils/coordinateSystems'
 import MousePosition from 'ol/control/MousePosition'
 import { get as getProjection } from 'ol/proj'
+import { mapActions, mapState } from 'vuex'
 
 export default {
     inject: ['getMap'],
-    props: {
-        displayedProjectionId: {
-            type: String,
-            required: true,
-        },
+    data() {
+        return {
+            availableProjections: allCoordinateSystems,
+        }
+    },
+    computed: {
+        ...mapState({
+            displayedProjectionId: (state) => state.map.displayedProjection.id,
+        }),
     },
     watch: {
         displayedProjectionId() {
-            this.setProjection()
+            this.changeCoordinateFormat()
         },
     },
     created() {
@@ -32,14 +50,18 @@ export default {
         // we wait for the next cycle to set the projection, otherwise the info can
         // sometimes be lost (and we end up with a different projection in the position display)
         this.$nextTick(() => {
-            this.setProjection()
+            this.changeCoordinateFormat()
         })
     },
     unmounted() {
         this.getMap().removeControl(this.mousePositionControl)
     },
     methods: {
-        setProjection() {
+        ...mapActions(['setDisplayedProjectionWithId']),
+        onProjectionChange(event) {
+            this.setDisplayedProjectionWithId(event.target.value)
+        },
+        changeCoordinateFormat() {
             const { id, format, epsg } = allCoordinateSystems.find(
                 (coordinateSystem) => coordinateSystem.id === this.displayedProjectionId
             )
diff --git a/src/modules/map/components/footer/MapFooterScale.vue b/src/modules/map/components/openlayers/OpenLayersScale.vue
similarity index 77%
rename from src/modules/map/components/footer/MapFooterScale.vue
rename to src/modules/map/components/openlayers/OpenLayersScale.vue
index e368fd61b..a53a00e5a 100644
--- a/src/modules/map/components/footer/MapFooterScale.vue
+++ b/src/modules/map/components/openlayers/OpenLayersScale.vue
@@ -5,14 +5,14 @@
 
 <script>
 import ScaleLine from 'ol/control/ScaleLine'
+import { mapState } from 'vuex'
 
 export default {
     inject: ['getMap'],
-    props: {
-        currentZoom: {
-            type: Number,
-            required: true,
-        },
+    computed: {
+        ...mapState({
+            currentZoom: (state) => state.position.zoom,
+        }),
     },
     created() {
         this.scaleLine = new ScaleLine({
@@ -30,6 +30,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* Must be unscoped, as the scaleLine is generated by OpenLayers on the fly */
 @import 'src/scss/webmapviewer-bootstrap-theme';
 
 .scale-line {
@@ -42,6 +43,7 @@ export default {
         text-align: center;
         font-weight: bold;
         color: $black;
+        background-color: rgba($white, 0.7);
     }
 }
 </style>
diff --git a/src/modules/menu/MenuModule.vue b/src/modules/menu/MenuModule.vue
index c0c1896d1..11472f65d 100644
--- a/src/modules/menu/MenuModule.vue
+++ b/src/modules/menu/MenuModule.vue
@@ -34,7 +34,7 @@
                 @zoom-out="decreaseZoom"
             />
             <Toggle3dButton />
-            <CompassButton v-if="!is3DActive" />
+            <div id="toolbox-compass-button" />
             <TimeSliderButton
                 v-if="visibleLayersWithTimeConfig.length"
                 :active="showTimeSlider"
@@ -83,10 +83,9 @@ import BlackBackdrop from '@/modules/menu/components/BlackBackdrop.vue'
 import HeaderWithSearch from '@/modules/menu/components/header/HeaderWithSearch.vue'
 import MenuTray from '@/modules/menu/components/menu/MenuTray.vue'
 import TimeSlider from '@/modules/menu/components/timeslider/TimeSlider.vue'
-import CompassButton from '@/modules/menu/components/toolboxRight/CompassButton.vue'
 import GeolocButton from '@/modules/menu/components/toolboxRight/GeolocButton.vue'
-import Toggle3dButton from '@/modules/menu/components/toolboxRight/Toggle3dButton.vue'
 import TimeSliderButton from '@/modules/menu/components/toolboxRight/TimeSliderButton.vue'
+import Toggle3dButton from '@/modules/menu/components/toolboxRight/Toggle3dButton.vue'
 import ZoomButtons from '@/modules/menu/components/toolboxRight/ZoomButtons.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { mapActions, mapGetters, mapState } from 'vuex'
@@ -99,7 +98,6 @@ export default {
         TimeSliderButton,
         HeaderWithSearch,
         BlackBackdrop,
-        CompassButton,
         ZoomButtons,
         GeolocButton,
         MenuTray,
@@ -117,7 +115,6 @@ export default {
             isFullscreenMode: (state) => state.ui.fullscreenMode,
             isEmbedded: (state) => state.ui.embeddedMode,
             previewYear: (state) => state.layers.previewYear,
-            is3DActive: (state) => state.ui.showIn3d,
         }),
         ...mapGetters([
             'isHeaderShown',
@@ -172,7 +169,7 @@ $openCloseButtonHeight: 2.5rem;
     }
     .time-sliders {
         left: 0;
-        width: calc(100vw - $map-button-diameter - $spacer);
+        width: calc(100% - $map-button-diameter - $spacer);
     }
     .toolbox-right,
     .time-sliders {
@@ -184,12 +181,13 @@ $openCloseButtonHeight: 2.5rem;
     }
     .menu-tray-container {
         pointer-events: none;
-        max-height: calc(100vh - $header-height);
+        max-height: calc(100% - $header-height);
         top: $header-height;
         z-index: $zindex-menu;
         &.dev-disclaimer-present {
-            top: $header-height + $dev-disclaimer-height;
-            max-height: calc(100vh - $header-height - $dev-disclaimer-height);
+            $menu-tray-offset: $header-height + $dev-disclaimer-height;
+            top: $menu-tray-offset;
+            max-height: calc(100% - $menu-tray-offset);
         }
         &.desktop-mode {
             bottom: 70px;
@@ -248,7 +246,7 @@ $openCloseButtonHeight: 2.5rem;
         .time-sliders {
             left: $menu-tray-width;
             transform: none;
-            width: calc(100vw - $map-button-diameter - $menu-tray-width - $spacer);
+            width: calc(100% - $map-button-diameter - $menu-tray-width - $spacer);
         }
         .toolbox-right,
         .time-sliders {
@@ -259,7 +257,7 @@ $openCloseButtonHeight: 2.5rem;
         }
         .menu-tray-container {
             top: 2 * $header-height;
-            max-height: calc(100vh - 2 * $header-height - $openCloseButtonHeight);
+            max-height: calc(100% - 2 * $header-height - $openCloseButtonHeight);
             &.dev-disclaimer-present {
                 max-height: calc(
                     100vh - 2 * $header-height - $dev-disclaimer-height - $openCloseButtonHeight
diff --git a/src/utils/LoadingScreen.vue b/src/utils/LoadingScreen.vue
index 9bcab8192..21f3d3832 100644
--- a/src/utils/LoadingScreen.vue
+++ b/src/utils/LoadingScreen.vue
@@ -25,8 +25,8 @@ export default {
     position: fixed;
     left: 0;
     top: 0;
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
     color: $black;
     background-color: rgba(255, 255, 255, 0.2);
     z-index: $zindex-loading-screen;
diff --git a/src/views/MapView.vue b/src/views/MapView.vue
index bfe81e07b..1638d9bf7 100644
--- a/src/views/MapView.vue
+++ b/src/views/MapView.vue
@@ -4,13 +4,11 @@
         <MapModule>
             <!-- we place the drawing module here so that it can receive the OpenLayers map instance through provide/inject -->
             <DrawingModule v-show="!embedded" v-if="!is3DActive" />
-            <!-- The footer also need to receive the map (for mouse position) -->
-            <MapFooter v-show="!embedded" v-if="!is3DActive" />
             <!-- Needed to be able to set an overlay when hovering over the profile with the mouse -->
-            <InfoboxModule v-if="!is3DActive" />
-            <!-- needed to e.g. set register an event to set the compass position -->
-            <MenuModule v-show="!embedded" />
+            <InfoboxModule />
         </MapModule>
+        <MapFooter v-show="!embedded" />
+        <MenuModule v-show="!embedded" />
         <I18nModule />
     </div>
 </template>
@@ -50,5 +48,6 @@ export default {
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: hidden;
 }
 </style>
diff --git a/tests/e2e-cypress/integration/drawing/profile.cy.js b/tests/e2e-cypress/integration/drawing/profile.cy.js
index c862486fd..bd8db9c14 100644
--- a/tests/e2e-cypress/integration/drawing/profile.cy.js
+++ b/tests/e2e-cypress/integration/drawing/profile.cy.js
@@ -86,7 +86,7 @@ describe('Profile popup', () => {
                     testInfo[key]
                 )
             })
-            cy.get('[data-cy="profile-graph"]').trigger('mouseover').trigger('mousemove', 'center')
+            cy.get('[data-cy="profile-graph"]').trigger('mouseenter').trigger('mousemove', 'center')
             cy.get('[data-cy="profile-popup-tooltip"] .distance').should('contain.text', '2.5 m')
             cy.get('[data-cy="profile-popup-tooltip"] .elevation').should(
                 'contain.text',
diff --git a/tests/e2e-cypress/integration/layers.cy.js b/tests/e2e-cypress/integration/layers.cy.js
index 65e1538c7..d2506aff2 100644
--- a/tests/e2e-cypress/integration/layers.cy.js
+++ b/tests/e2e-cypress/integration/layers.cy.js
@@ -620,7 +620,7 @@ describe('Test of layer handling', () => {
         })
     })
     context('Language settings in menu', () => {
-        it.only('keeps the layer settings when changing language', () => {
+        it('keeps the layer settings when changing language', () => {
             const langBefore = 'en'
             const langAfter = 'de'
             const visibleLayerIds = [
diff --git a/tests/e2e-cypress/integration/mouseposition.cy.js b/tests/e2e-cypress/integration/mouseposition.cy.js
index 37f6a66e2..102a2c682 100644
--- a/tests/e2e-cypress/integration/mouseposition.cy.js
+++ b/tests/e2e-cypress/integration/mouseposition.cy.js
@@ -72,6 +72,8 @@ describe('Test mouse position', () => {
                 lon: defaultCenter[1],
                 z: 12,
             })
+            // waiting for OL to be loaded before testing
+            cy.get('[data-cy="ol-map"]').should('be.visible')
         })
         it('Shows LV95 coordinates by default', () => {
             checkMousePositionNumberValue(2604624.64, 1261029.16, parseLV)
diff --git a/tests/e2e-cypress/support/commands.js b/tests/e2e-cypress/support/commands.js
index 20ebd1ebd..aec19a03c 100644
--- a/tests/e2e-cypress/support/commands.js
+++ b/tests/e2e-cypress/support/commands.js
@@ -238,7 +238,7 @@ Cypress.Commands.add('readWindowValue', (key) => {
 
 Cypress.Commands.add('activateFullscreen', () => {
     cy.readStoreValue('state.ui.fullscreenMode').should('be.false')
-    cy.get('[data-cy="map"]').click('center')
+    cy.get('[data-cy="ol-map"]').click('center')
     cy.readStoreValue('getters.isPhoneMode').then((isPhoneMode) => {
         if (isPhoneMode) {
             cy.waitUntilState((state) => state.ui.fullscreenMode)