Fix mod selection and deselection

components/Map.tsx

@@ -147,7 +147,6 @@ const Map: React.FC = () => {
 
   const clearSelectedCell = useCallback(() => {
     setSelectedCell(null);
-    router.push({ query: {} });
     if (map.current) map.current.removeFeatureState({ source: "grid-source" });
     if (map.current && map.current.getLayer("selected-cell-layer")) {
       map.current.removeLayer("selected-cell-layer");
@@ -158,7 +157,13 @@ const Map: React.FC = () => {
     requestAnimationFrame(() => {
       if (map.current) map.current.resize();
     });
-  }, [map, router]);
+  }, [map]);
+
+  const clearSelectedMod = useCallback(() => {
+    requestAnimationFrame(() => {
+      if (map.current) map.current.resize();
+    });
+  }, [map]);
 
   useEffect(() => {
     if (!heatmapLoaded) return; // wait for all map layers to load
@@ -183,11 +188,19 @@ const Map: React.FC = () => {
   }, [
     selectedCell,
     router.query.cell,
+    router.query.mod,
     selectCell,
     clearSelectedCell,
     heatmapLoaded,
   ]);
 
+  useEffect(() => {
+    if (!heatmapLoaded) return; // wait for all map layers to load
+    if (!router.query.mod || typeof router.query.mod !== "string") {
+      clearSelectedMod();
+    }
+  }, [router.query.mod, clearSelectedMod, heatmapLoaded]);
+
   useEffect(() => {
     if (map.current) return; // initialize map only once
     map.current = new mapboxgl.Map({

components/ModData.tsx

@@ -76,7 +76,7 @@ const ModData: React.FC<Props> = ({ selectedMod, counts }) => {
         <h1>
           <a
             href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}
-            className={styles.link}
+            className={`${styles.link} ${styles.name}`}
           >
             {data.name}
           </a>

components/SearchBar.tsx

@@ -91,7 +91,6 @@ const SearchBar: React.FC<Props> = ({ clearSelectedCell, map }) => {
   const onChooseResult =
     (item: Mod) =>
     (e: React.MouseEvent<HTMLElement> | React.TouchEvent<HTMLElement>) => {
-      clearSelectedCell();
       router.push({ query: { mod: item.id } });
       setSearch("");
       setResults([]);

styles/ModData.module.css

@@ -1,3 +1,11 @@
 .status {
   margin-top: 24px;
 }
+
+a.link {
+  color: #72030a;
+}
+
+a.name {
+  line-height: 1.75rem;
+}

styles/Sidebar.module.css

@@ -28,7 +28,7 @@
 .close {
   position: fixed;
   top: 8px;
-  left: 232px;
+  left: 240px;
   font-size: 24px;
   margin-left: 12px;
   border: none;