Merge pull request #1350 from cityofaustin/md-15182-geocoder-popup-ov…

…erlap Reposition Fatality and Serious Injury counts pop-up when boundary box is activated
cityofaustin · Jan 26, 2024 · 93308c0 · 93308c0
2 parents 81f0db8 + 92c3e05
commit 93308c0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js b/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js
@@ -1,19 +1,19 @@
 import React from "react";
 import InfoCard from "./InfoCard";
-import { StyledDesktopInfo } from "./infoBoxStyles";
+import { StyledPoylgonInfo } from "./infoBoxStyles";
 
 const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => {
   const createCrashContent = (crashCounts) => {
     const content = [];
     isMapTypeSet.fatal &&
       content.push({
         title: "Fatalities",
-        content: `${crashCounts.fatality || 0}`,
+        content: `${crashCounts?.fatality || 0}`,
       });
     isMapTypeSet.injury &&
       content.push({
         title: "Serious Injuries",
-        content: `${crashCounts.injury || 0}`,
+        content: `${crashCounts?.injury || 0}`,
       });
     return content;
   };
@@ -22,7 +22,7 @@ const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => {
 
   const infoCard = <InfoCard content={content} />;
 
-  return <StyledDesktopInfo>{infoCard}</StyledDesktopInfo>;
+  return <StyledPoylgonInfo>{infoCard}</StyledPoylgonInfo>;
 };
 
 export default MapPolygonInfoBox;
diff --git a/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js b/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js
@@ -4,13 +4,18 @@ import { responsive } from "../../../constants/responsive";
 export const popupMarginsWidth = 20;
 export const maxInfoBoxWidth = responsive.drawerWidth - popupMarginsWidth;
 
-export const StyledDesktopInfo = styled.div`
+export const StyledPoylgonInfo = styled.div`
   position: absolute;
-  margin: 8px;
-  padding: 2px;
+  margin: 6px;
   max-width: ${maxInfoBoxWidth}px;
   z-index: 9 !important;
   pointer-events: none;
+  /* Combine the height of the geocoder box and 10px Mapbox spacing */
+  top: 46px;
+  /* Combine the mobile height of the geocoder box and 10px Mapbox spacing */
+  @media (max-width: 639px) {
+    top: 60px;
+  }
 `;
 
 export const StyledMobileInfo = styled.div`