diff --git a/assets/src/components/mapPage.tsx b/assets/src/components/mapPage.tsx index 878960811..324c7af13 100644 --- a/assets/src/components/mapPage.tsx +++ b/assets/src/components/mapPage.tsx @@ -5,6 +5,7 @@ import { joinClasses } from "../helpers/dom" import { ChevronLeftIcon, SearchIcon } from "../helpers/icon" import useMostRecentVehicleById from "../hooks/useMostRecentVehicleById" import usePatternsByIdForRoute from "../hooks/usePatternsByIdForRoute" +import useScreenSize from "../hooks/useScreenSize" import useSocket from "../hooks/useSocket" import { Ghost, Vehicle, VehicleId } from "../realtime" import { RoutePattern } from "../schedule" @@ -212,10 +213,15 @@ const MapPage = (): ReactElement => { const [{ searchPageState }, dispatch] = useContext(StateDispatchContext), { selectedEntity = null } = searchPageState + const deviceType = useScreenSize() + const isMobile = + deviceType === "mobile" || deviceType === "mobile_landscape_tablet_portrait" + const defaultSearchOpen = !selectedEntity || !isMobile + const { openVehiclePropertiesPanel } = usePanelStateFromStateDispatchContext() // #region Search Drawer Logic - const [searchOpen, setSearchOpen] = useState(true) + const [searchOpen, setSearchOpen] = useState(defaultSearchOpen) const toggleSearchDrawer = useCallback( () => setSearchOpen((open) => !open), [setSearchOpen] @@ -243,12 +249,12 @@ const MapPage = (): ReactElement => { fullStoryEvent("RPC Opened", {}) } if (selectedEntity) { - setSearchOpen(true) + setSearchOpen(!isMobile) } dispatch(setSelectedEntity(selectedEntity)) }, - [dispatch] + [dispatch, isMobile] ) const selectVehicleResult = useCallback(