Fix fullscreen controls

components/Map.tsx

@@ -28,6 +28,9 @@ const Map: React.FC = () => {
   const map = useRef<mapboxgl.Map | null>(
     null
   ) as React.MutableRefObject<mapboxgl.Map>;
+  const mapWrapper = useRef<HTMLDivElement | null>(
+    null
+  ) as React.MutableRefObject<HTMLDivElement>;
   const [selectedCell, setSelectedCell] = useState<[number, number] | null>(
     null
   );
@@ -269,8 +272,16 @@ const Map: React.FC = () => {
         },
         "grid-labels-layer"
       );
-
+      const fullscreenControl = new mapboxgl.FullscreenControl();
-      map.current.addControl(new mapboxgl.FullscreenControl());
+      console.log(
+        (fullscreenControl as unknown as { _container: HTMLElement })._container
+      );
+      (fullscreenControl as unknown as { _container: HTMLElement })._container =
+        mapWrapper.current;
+      console.log(
+        (fullscreenControl as unknown as { _container: HTMLElement })._container
+      );
+      map.current.addControl(fullscreenControl);
       map.current.addControl(new mapboxgl.NavigationControl());
 
       let singleClickTimeout: NodeJS.Timeout | null = null;
@@ -364,9 +375,7 @@ const Map: React.FC = () => {
             });
 
             const bounds = map.current.getBounds();
-            console.log(bounds);
             if (!bounds.contains(nw) || !bounds.contains(se)) {
-              console.log("out of viewport, panning");
               map.current.panTo(nw);
             }
           }
@@ -377,23 +386,29 @@ const Map: React.FC = () => {
         if (singleClickTimeout) clearTimeout(singleClickTimeout);
         singleClickTimeout = null;
       });
+
+      map.current.on("idle", () => {
+        map.current.resize();
+      });
     });
   }, [setSelectedCell, data]);
 
   return (
     <>
-      <Sidebar
-        selectedCell={selectedCell}
-        setSelectedCell={setSelectedCell}
-        map={map}
-      />
       <div
         className={`${styles["map-wrapper"]} ${
           selectedCell ? styles["map-wrapper-sidebar-open"] : ""
         }`}
+        ref={mapWrapper}
       >
-        <div ref={mapContainer} className={styles["map-container"]} />
+        <div ref={mapContainer} className={styles["map-container"]}>
-        <ToggleLayersControl map={map} />
+          <Sidebar
+            selectedCell={selectedCell}
+            setSelectedCell={setSelectedCell}
+            map={map}
+          />
+          <ToggleLayersControl map={map} />
+        </div>
       </div>
     </>
   );

styles/Map.module.css

@@ -11,14 +11,16 @@
   height: 100%;
 }
 
-.map-wrapper-sidebar-open {
+.map-wrapper-sidebar-open .map-container {
-  margin-left: 300px;
+  width: calc(100% - 300px);
+  left: 300px;
 }
 
 @media only screen and (max-width: 600px) {
-  .map-wrapper-sidebar-open {
+  .map-wrapper-sidebar-open .map-container {
-    margin-left: initial;
+    height: calc(100% - 45%);
-    margin-bottom: 45%;
+    width: 100%;
-    height: 55%;
+    left: 0;
+    bottom: 45%;
   }
 }

styles/Sidebar.module.css

@@ -9,6 +9,7 @@
   width: 300px;
   padding: 12px;
   border-right: 1px solid #222222;
+  font-size: 0.875rem;
 }
 
 @media only screen and (max-width: 600px) {