Fix territory shortcuts on mobile (#1145)

* Fix territory shortcuts on mobile

- remove zoom controls on mobile
- center search on mobile
- move up the territoriy shortcuts on mobile
- increase height of map on mobile in portrait mode
- update tests

* Reduce map height

- troubleshooting staging map height

* Removes null render in map

* Comment out conditional render of NavControls

* Revert height changes

* Remove MapSearch component

* Remove territory styling

* Console.log the device width

* Add logging width/mobile onLoad()

* Add isMobile to map height prop

* Swap conditional order of map height

* Add isMobileMapState to map height

* Add back all changes and force height to non-100%

- staging mobile seems to have height at 100% regardless of conditional. This will test this.
- this will break desktop on staging and is purposeful

* Remove API key for mapbox

* Add height as 90% to check conditional

* trying isMobile and windowWidth

* is not mobile and width > 1024

* use a function instead of a conditional

* Modify getHeight function

- remove Cypress tests from GHA to speed up build / deplot to staging

* Console.log windowWidth and constants.desktop

* Add boolean console.log

* Place values in DOM itself

* add height to div

* log out types

* add types nicely formatted

* Move height styling on map from inline to parent

- use a media query to detect mobile and set the map parents height via SASS

* Add back cypress tests

client/src/components/J40Map.tsx

@@ -229,7 +229,7 @@ const J40Map = ({location}: IJ40Interface) => {
 
   return (
     <>
-      <Grid col={12} desktop={{col: 9}}>
+      <Grid desktop={{col: 9}} className={styles.j40Map}>
 
         {/**
          * This will render the MapSearch component
@@ -256,25 +256,28 @@ const J40Map = ({location}: IJ40Interface) => {
          * some children.
          */}
         <ReactMapGL
-          // Initialization props:
+          // ****** Initialization props: ******
           // access token is j40StylesReadToken
           mapboxApiAccessToken={
             process.env.MAPBOX_STYLES_READ_TOKEN ?
             process.env.MAPBOX_STYLES_READ_TOKEN : ''}
 
-          // Map state props:
+
+          // ****** Map state props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#map-state
           {...viewport}
           mapStyle={
             process.env.MAPBOX_STYLES_READ_TOKEN ? `mapbox://styles/mapbox/streets-v11` :
             getOSBaseMap()
           }
-          // This styles will need to be enabled in some way when adding back the free map - #1133
           width="100%"
-          height={windowWidth < 1024 ? '44vh' : '100%'}
+          // Ajusting this height with a conditional statement will not render the map on staging.
+          // The reason for this issue is unknown. Consider styling the parent container via SASS.
+          height="100%"
           mapOptions={{hash: true}}
 
-          // Interaction option props:
+
+          // ****** Interaction option props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#interaction-options
           maxZoom={constants.GLOBAL_MAX_ZOOM}
           minZoom={constants.GLOBAL_MIN_ZOOM}
@@ -282,7 +285,8 @@ const J40Map = ({location}: IJ40Interface) => {
           touchRotate={false}
           interactiveLayerIds={[constants.HIGH_ZOOM_LAYER_ID, constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID]}
 
-          // Callback props:
+
+          // ****** Callback props: ******
           // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#callbacks
           onViewportChange={setViewport}
           onClick={onClick}
@@ -401,10 +405,10 @@ const J40Map = ({location}: IJ40Interface) => {
           )}
 
           {/* This will add the navigation controls of the zoom in and zoom out buttons */}
-          <NavigationControl
+          { windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <NavigationControl
             showCompass={false}
             className={styles.navigationControl}
-          />
+          /> }
 
           {/* This places Geolocation behind a feature flag */}
           {'gl' in flags ? <GeolocateControl
@@ -424,7 +428,7 @@ const J40Map = ({location}: IJ40Interface) => {
         </ReactMapGL>
       </Grid>
 
-      <Grid col={12} desktop={{col: 3}} className={styles.mapInfoPanel}>
+      <Grid desktop={{col: 3}}>
         <MapInfoPanel
           className={styles.mapInfoPanel}
           featureProperties={detailViewData?.properties}