Handle tablet view and center red marker

Author: hanapotski

client/src/components/FoodSeeker/SearchResults/ResultsMap/ResultsMap.js

@@ -160,7 +160,7 @@ const ResultsMap = ({ stakeholders, categoryIds, toggleCategory, loading }) => {
             latitude={startIconCoordinates.latitude}
             offsetTop={-50}
             offsetLeft={-25}
-            anchor="bottom"
+            anchor="center"
           >
             <StartIcon />
           </Marker>
@@ -218,8 +218,8 @@ const StartIcon = () => {
   return (
     <svg
       viewBox="0 0 90 100"
-      width="54"
-      height="74"
+      width="44"
+      height="64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >

client/src/components/FoodSeeker/SearchResults/layouts/Mobile.js

@@ -41,8 +41,6 @@ const MobileLayout = ({ filters, map, list, showList }) => {
     let newY;
     if (filterPanelOpen) {
       newY = 100;
-    } else if (hasAdvancedFilterFeatureFlag) {
-      newY = showList ? (100 / window.innerHeight) * 60 : 54;
     } else {
       newY = showList ? 17 : 54;
     }

client/src/hooks/useMapbox.js

@@ -6,7 +6,7 @@ import { useMap } from "react-map-gl";
 export const useMapbox = () => {
   const mapRef = useRef();
   const isListPanelOpen = useListPanel();
-  const { isMobile } = useBreakpoints();
+  const { isMobile, isDesktop } = useBreakpoints();
   const mapbox = useMap();
 
   const getViewport = () => {
@@ -29,8 +29,8 @@ export const useMapbox = () => {
     }
     mapbox.default.flyTo({
       center: [
-        isListPanelOpen && !isMobile ? longitude - 0.08 : longitude,
-        isMobile ? latitude - 0.05 : latitude,
+        isListPanelOpen && isDesktop ? longitude - 0.08 : longitude,
+        isMobile ? latitude - 0.04 : latitude,
       ],
       duration: 2000,
     });