diff --git a/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js b/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js index 796952d48..ee7d8fee9 100644 --- a/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js +++ b/atd-vzv/src/views/map/InfoBox/MapPolygonInfoBox.js @@ -1,6 +1,6 @@ import React from "react"; import InfoCard from "./InfoCard"; -import { StyledDesktopInfo } from "./infoBoxStyles"; +import { StyledPoylgonInfo } from "./infoBoxStyles"; const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => { const createCrashContent = (crashCounts) => { @@ -8,12 +8,12 @@ const MapPolygonInfoBox = ({ crashCounts, isMapTypeSet }) => { 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 = ; - return {infoCard}; + return {infoCard}; }; export default MapPolygonInfoBox; diff --git a/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js b/atd-vzv/src/views/map/InfoBox/infoBoxStyles.js index 31b690948..702656008 100644 --- 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`