rehabilitate previous code to toggle map & adjust map height to fit page

src/views/Project/FeaturesListAndMap.vue

@@ -14,8 +14,7 @@
       />
 
       <div
-        v-if="showMap"
-        class="ui tab active map-container visible"
+        :class="['ui tab active map-container', {visible: showMap}]"
         data-tab="map"
       >
         <div class="hider" />
@@ -40,7 +39,7 @@
         </div>
       </div>
       <FeatureListTable
-        v-else
+        v-show="!showMap"
         :paginated-features="paginatedFeatures"
         :page-numbers="pageNumbers"
         :checked-features.sync="checkedFeatures"
@@ -513,7 +512,11 @@ export default {
 }
 
 .map-container {
+  width: 80vw;
+  transform: translateX(-50%);
+  margin-left: 50%;
   visibility: hidden;
+  position: absolute;
 }
 .map-container.visible {
   visibility: visible;
@@ -538,8 +541,8 @@ export default {
 
   #map {
     width: 100%;
-    min-height: 300px;
-    height: calc(100vh - 300px);
+    min-height: 310px;
+    height: calc(100vh - 310px);
     border: 1px solid grey;
     /* To not hide the filters */
     z-index: 1;