fix(map): handle layer selector size when elevation profile is shown …

…in fullscreen mode

src/components/map/OlMap.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="{ 'ol-map-fullscreen': isFullscreen }" style="width: 100%; height: 100%">
+  <div style="width: 100%; height: 100%">
     <div ref="map" style="width: 100%; height: 100%" @click="showLayerSwitcher = false" />
 
     <div
@@ -1318,14 +1318,21 @@ $control-margin: 0.5em;
   justify-content: center;
 }
 
-.ol-map-fullscreen {
+:fullscreen {
   .ol-control-layer-switcher {
     width: 320px;
   }
   .ol-control-layer-switcher-layers {
     width: 300px;
     height: 100vh;
   }
+
+  .with-elevation-profile .ol-control-layer-switcher-layers {
+    /* elevation profile occupies 30% of the screen, see MapBox.vue */
+    height: calc(100vh * 0.7);
+    max-height: calc(100vh - 200px);
+    min-height: calc(100vh - 350px);
+  }
 }
 
 .ol-control-layer-switcher-button {

src/views/document/utils/boxes/MapBox.vue

@@ -11,7 +11,7 @@
     <!-- The fullscreen map container is used to display both the map
          and the elevation profile in fullscreen (if the elevation profile exists) -->
     <div id="fullscreen-map-container">
-      <div class="map-container" :class="{ elevationProfileHidden }">
+      <div class="map-container" :class="{ 'with-elevation-profile': showElevationProfile && !elevationProfileHidden }">
         <map-view
           :documents="new Array(document)"
           :show-protection-areas="['r', 'w'].includes(document.type)"
@@ -176,14 +176,14 @@ export default {
  * rule doesn't apply
  */
 :fullscreen .map-container {
-  height: 70%;
-  max-height: calc(100% - 200px);
-  min-height: calc(100% - 350px);
+  height: 100%;
+  max-height: 100%;
   margin: 0;
 
-  &.elevationProfileHidden {
-    height: 100%;
-    max-height: 100%;
+  &.with-elevation-profile {
+    height: 70%;
+    max-height: calc(100% - 200px);
+    min-height: calc(100% - 350px);
   }
 }
 </style>