refactor: height of the geomap visualization container

Author: andreishket

vis/js/templates/Geomap/HeightContainer/index.tsx

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+import { useSelector } from "react-redux";
+
+import { getMapHeight } from "./selectors";
+
+export const HeightContainer: FC<PropsWithChildren> = ({ children }) => {
+  const height = useSelector(getMapHeight);
+
+  return <div style={{ height }}>{children}</div>;
+};

vis/js/templates/Geomap/HeightContainer/selectors.ts

@@ -0,0 +1,3 @@
+import { State } from "@/js/types";
+
+export const getMapHeight = (state: State) => state.chart.height;

vis/js/templates/Geomap/index.tsx

@@ -4,15 +4,18 @@ import { FC } from "react";
 import { MapContainer, ZoomControl } from "react-leaflet";
 
 import { CONFIG } from "./config";
+import { HeightContainer } from "./HeightContainer";
 import { LayersSwitcher } from "./LayersSwitcher";
 import { Pins } from "./Pins";
 
 const { MAP, ZOOM_CONTROL } = CONFIG;
 
 export const Geomap: FC = () => (
-  <MapContainer {...MAP} className="geomap_container">
-    <ZoomControl {...ZOOM_CONTROL} />
-    <LayersSwitcher />
-    <Pins />
-  </MapContainer>
+  <HeightContainer>
+    <MapContainer {...MAP} className="geomap_container">
+      <ZoomControl {...ZOOM_CONTROL} />
+      <LayersSwitcher />
+      <Pins />
+    </MapContainer>
+  </HeightContainer>
 );

vis/stylesheets/modules/_geomap.scss

@@ -1,7 +1,7 @@
 /* ########### Geomap ########### */
 
 .geomap_container {
-  height: 100vh;
+  height: 100%;
   width: 100%;
   z-index: 0;
 }