diff --git a/assets/css/_ladder_page.scss b/assets/css/_ladder_page.scss
index 756076fac..b94856a38 100644
--- a/assets/css/_ladder_page.scss
+++ b/assets/css/_ladder_page.scss
@@ -17,13 +17,13 @@ $color-route-tabs-separator: #9fa2ac;
   padding-left: $route-picker-width;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-ladder-page--picker-container-visible {
     padding-left: $mobile-route-picker-width;
   }
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-ladder-page--picker-container-visible {
     .c-ladder-page__tab-bar-and-ladders {
       @include blur;
diff --git a/assets/css/_late_view.scss b/assets/css/_late_view.scss
index b3737156b..b22867264 100644
--- a/assets/css/_late_view.scss
+++ b/assets/css/_late_view.scss
@@ -10,8 +10,8 @@ $late-view-background-color: $color-bg-light;
   top: 0;
   z-index: map-get($z-page-layout-context, "view");
 
-  @media screen and (max-width: 700px) {
-    width: 100%;
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+    width: 100vw;
   }
 }
 
diff --git a/assets/css/_map_page.scss b/assets/css/_map_page.scss
index 1f0e72826..76c832e9b 100644
--- a/assets/css/_map_page.scss
+++ b/assets/css/_map_page.scss
@@ -22,7 +22,7 @@ $z-map-page-context: (
   z-index: map-get($z-map-page-context, "map");
 
   .c-map-page__input-and-results--visible ~ & {
-    @media screen and (max-width: $mobile-portrait-max-width) {
+    @media screen and (max-width: map-get($old-breakpoints, "mobile-portrait-max-width")) {
       filter: blur(3.25px);
     }
   }
@@ -102,7 +102,7 @@ $z-map-page-context: (
   display: none;
 
   .c-map-page__input-and-results--visible ~ & {
-    @media screen and (max-width: $mobile-portrait-max-width) {
+    @media screen and (max-width: map-get($old-breakpoints, "mobile-portrait-max-width")) {
       // Make button clickable
       display: block;
       // Force Flex + Posistion to fill area
diff --git a/assets/css/_notification_drawer.scss b/assets/css/_notification_drawer.scss
index cf513e729..e8c5ff7a3 100644
--- a/assets/css/_notification_drawer.scss
+++ b/assets/css/_notification_drawer.scss
@@ -10,10 +10,10 @@
   width: 23.5rem;
   z-index: map-get($z-page-layout-context, "view");
 
-  @media screen and (max-width: $mobile-max-width) {
-    width: 100%;
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+    width: 100vw;
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
   }
diff --git a/assets/css/_picker_container.scss b/assets/css/_picker_container.scss
index d447a0aee..e52fb8ec9 100644
--- a/assets/css/_picker_container.scss
+++ b/assets/css/_picker_container.scss
@@ -35,7 +35,7 @@
   display: none;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-picker-container {
     --picker-container-width: min(
       #{$mobile-route-picker-width},
diff --git a/assets/css/_properties_panel.scss b/assets/css/_properties_panel.scss
index 83a134c05..4808e7450 100644
--- a/assets/css/_properties_panel.scss
+++ b/assets/css/_properties_panel.scss
@@ -11,14 +11,10 @@
   width: 23.5rem;
   z-index: map-get($z-page-layout-context, "properties-panel");
 
-  @media screen and (max-width: $mobile-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
     width: 100vw;
-
-    .l-nav__app-content & {
-      width: 100%;
-    }
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
   }
diff --git a/assets/css/_search_page.scss b/assets/css/_search_page.scss
index d86fef322..c9d23fe5c 100644
--- a/assets/css/_search_page.scss
+++ b/assets/css/_search_page.scss
@@ -61,7 +61,7 @@ $z-search-page-context: (
   padding: 0.625rem 1rem 0 1rem;
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-search-page {
     flex-direction: column;
   }
diff --git a/assets/css/_skate_ui.scss b/assets/css/_skate_ui.scss
index 71ef4a0e7..2f389d1fa 100644
--- a/assets/css/_skate_ui.scss
+++ b/assets/css/_skate_ui.scss
@@ -1,3 +1,9 @@
+$breakpoints: (
+  "max-mobile-width": 480px,
+  "max-mobile-landscape-tablet-portrait-width": 800px,
+  "max-tablet-width": 1340px,
+);
+
 // #region Text Styles [v2]
 
 // https://www.notion.so/mbta-downtown-crossing/2022-12-19-Type-Styles-6f6c90eb449248b7a954e234b718137f
diff --git a/assets/css/_swings_view.scss b/assets/css/_swings_view.scss
index 26142b6b2..3ce666ef5 100644
--- a/assets/css/_swings_view.scss
+++ b/assets/css/_swings_view.scss
@@ -18,19 +18,18 @@
   }
 
   // Full width on mobile portrait, to be updated with more responsive designs
-  @media screen and (max-width: 480px) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
     .l-nav__app-content & {
-      width: 100%;
+      width: 100vw;
 
       .c-swings-view__table {
         width: 100%;
       }
     }
   }
-  @media screen and (max-width: $mobile-portrait-max-width) {
+  @media screen and (max-width: map-get($breakpoints, "max-mobile-width")) {
     position: fixed;
     bottom: 0;
-    width: 100vw;
   }
 }
 
@@ -215,7 +214,7 @@
   }
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .c-swings-view__header {
     padding-left: 1.75rem;
   }
diff --git a/assets/css/_ui_kit.scss b/assets/css/_ui_kit.scss
index 7e32eb1b2..84479f354 100644
--- a/assets/css/_ui_kit.scss
+++ b/assets/css/_ui_kit.scss
@@ -441,7 +441,7 @@ $font-family-route-pill: "Helvetica Neue", Helvetica, Arial, sans-serif;
   filter: blur(5px);
 }
 
-@media screen and (max-width: $mobile-max-width) {
+@media screen and (max-width: map-get($old-breakpoints, "mobile-max-width")) {
   .blurred-mobile {
     @include blur;
   }
diff --git a/assets/css/app.scss b/assets/css/app.scss
index 7ce00e550..59fe82c88 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,6 +1,7 @@
-$non-mobile-min-width: 768px;
-$mobile-max-width: $non-mobile-min-width - 1;
-$mobile-portrait-max-width: 480px;
+$old-breakpoints: (
+  "mobile-max-width": 767px,
+  "mobile-portrait-max-width": 480px,
+);
 $tab-bar-width: 3rem;
 $drawer-tab-width: 2rem;
 $route-picker-width: 21.875rem;
diff --git a/assets/src/components/nav.tsx b/assets/src/components/nav.tsx
index 428d9910c..bcf5324af 100644
--- a/assets/src/components/nav.tsx
+++ b/assets/src/components/nav.tsx
@@ -6,6 +6,7 @@ import LeftNav from "./nav/leftNav"
 import TopNav from "./nav/topNav"
 import MobilePortraitNav from "./nav/mobilePortraitNav"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
+import { usePanelStateFromStateDispatchContext } from "../hooks/usePanelState"
 
 interface Props {
   children?: React.ReactNode
@@ -15,19 +16,24 @@ const Nav: React.FC<Props> = ({ children }) => {
   const [, dispatch] = useContext(StateDispatchContext)
   const deviceType = useScreenSize()
 
+  const { isViewOpen } = usePanelStateFromStateDispatchContext()
+
   switch (deviceType) {
     case "mobile":
       return (
         <div className="l-nav--narrow">
           <div className="l-nav__app-content">{children}</div>
-          <MobilePortraitNav />
+          <MobilePortraitNav isViewOpen={isViewOpen} />
         </div>
       )
     case "mobile_landscape_tablet_portrait":
       return (
         <div className="l-nav--medium">
           <div className="l-nav__app-content">{children}</div>
-          <div className="l-nav__nav-bar l-nav__nav-bar--left">
+          <div
+            className="l-nav__nav-bar l-nav__nav-bar--left"
+            hidden={isViewOpen}
+          >
             <LeftNav
               toggleMobileMenu={() => dispatch(toggleMobileMenu())}
               defaultToCollapsed={true}
diff --git a/assets/src/components/nav/mobilePortraitNav.tsx b/assets/src/components/nav/mobilePortraitNav.tsx
index decfb6336..f59cd6e6b 100644
--- a/assets/src/components/nav/mobilePortraitNav.tsx
+++ b/assets/src/components/nav/mobilePortraitNav.tsx
@@ -3,20 +3,18 @@ import { StateDispatchContext } from "../../contexts/stateDispatchContext"
 import { toggleMobileMenu } from "../../state"
 import BottomNavMobile from "./bottomNavMobile"
 import TopNavMobile from "./topNavMobile"
-import { OpenView } from "../../state/pagePanelState"
 import { usePanelStateFromStateDispatchContext } from "../../hooks/usePanelState"
 
-const MobilePortraitNav = (): JSX.Element => {
+const MobilePortraitNav = ({
+  isViewOpen,
+}: {
+  isViewOpen: boolean
+}): JSX.Element => {
   const [state, dispatch] = useContext(StateDispatchContext)
 
   const { mobileMenuIsOpen, routeTabs } = state
-  const {
-    currentView: { openView, selectedVehicleOrGhost },
-    openNotificationDrawer,
-    openSwingsView,
-  } = usePanelStateFromStateDispatchContext()
-
-  const isViewOpen = openView !== OpenView.None || selectedVehicleOrGhost
+  const { openNotificationDrawer, openSwingsView } =
+    usePanelStateFromStateDispatchContext()
 
   const navVisibilityStyle = isViewOpen ? "hidden" : "visible"
 
diff --git a/assets/src/components/viewHeader.tsx b/assets/src/components/viewHeader.tsx
index 762f3df70..b40614ed9 100644
--- a/assets/src/components/viewHeader.tsx
+++ b/assets/src/components/viewHeader.tsx
@@ -31,11 +31,14 @@ const ViewHeader: ViewHeaderType = ({
 }): JSX.Element => {
   const deviceType = useScreenSize()
 
+  const screenSizeAllowsBackButton =
+    deviceType === "mobile" || deviceType === "mobile_landscape_tablet_portrait"
+
   return (
     <div className="c-view-header">
       {backlinkToView &&
       backlinkToView !== OpenView.None &&
-      deviceType === "mobile" ? (
+      screenSizeAllowsBackButton ? (
         <button
           className="c-view-header__backlink"
           onClick={followBacklink}
diff --git a/assets/src/hooks/usePanelState.ts b/assets/src/hooks/usePanelState.ts
index 04c139f62..20c261b91 100644
--- a/assets/src/hooks/usePanelState.ts
+++ b/assets/src/hooks/usePanelState.ts
@@ -3,6 +3,7 @@ import { TabMode } from "../components/propertiesPanel/tabPanels"
 import { StateDispatchContext } from "../contexts/stateDispatchContext"
 import { Dispatch } from "../state"
 import {
+  OpenView,
   PagePath,
   VehicleType,
   ViewState,
@@ -37,8 +38,9 @@ export const usePanelStateForViewState = (
   view: ViewState,
   dispatch: Dispatch
 ) => {
+  const currentView = view.state[view.currentPath]
   return {
-    currentView: view.state[view.currentPath],
+    currentView,
     setPath: (path: PagePath) => {
       if (path !== view.currentPath) {
         dispatch(setPath(path))
@@ -52,5 +54,9 @@ export const usePanelStateForViewState = (
     openNotificationDrawer: () => dispatch(openNotificaitonDrawer()),
     closeView: () => dispatch(closeView()),
     openPreviousView: () => dispatch(openPreviousView()),
+    isViewOpen:
+      currentView.openView !== OpenView.None ||
+      (currentView.selectedVehicleOrGhost && true) ||
+      false,
   }
 }
diff --git a/assets/tests/components/nav.test.tsx b/assets/tests/components/nav.test.tsx
index 88d236260..103f2e055 100644
--- a/assets/tests/components/nav.test.tsx
+++ b/assets/tests/components/nav.test.tsx
@@ -8,6 +8,7 @@ import Nav from "../../src/components/nav"
 import useScreenSize from "../../src/hooks/useScreenSize"
 import getTestGroups from "../../src/userTestGroups"
 import { TestGroups } from "../../src/userInTestGroup"
+import { mockUsePanelState } from "../testHelpers/usePanelStateMocks"
 
 jest.mock("../../src/hooks/useScreenSize", () => ({
   __esModule: true,
@@ -19,13 +20,16 @@ jest.mock("userTestGroups", () => ({
   default: jest.fn(() => []),
 }))
 
+jest.mock("../../src/hooks/usePanelState")
+
 beforeEach(() => {
+  mockUsePanelState({ isViewOpen: false })
   ;(getTestGroups as jest.Mock).mockReturnValue([])
 })
 
 describe("Nav", () => {
   test("renders mobile nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockReturnValueOnce("mobile")
 
     const result = render(
       <BrowserRouter>
@@ -38,9 +42,9 @@ describe("Nav", () => {
   })
 
   test("renders mobile landscape / tablet portrait nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(
-      () => "mobile_landscape_tablet_portrait"
-    )
+    jest
+      .mocked(useScreenSize)
+      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
 
     const result = render(
       <BrowserRouter>
@@ -52,8 +56,23 @@ describe("Nav", () => {
     expect(result.queryByText("Route Ladders")).toBeNull()
   })
 
+  test("renders mobile landscape / tablet portrait nav content with nav elements hidden when a view is open", () => {
+    mockUsePanelState({ isViewOpen: true })
+    jest
+      .mocked(useScreenSize)
+      .mockReturnValueOnce("mobile_landscape_tablet_portrait")
+
+    const result = render(
+      <BrowserRouter>
+        <Nav>Hello, world!</Nav>
+      </BrowserRouter>
+    )
+
+    expect(result.getByTitle("Route Ladders")).not.toBeVisible()
+  })
+
   test("renders tablet nav content", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "tablet")
+    jest.mocked(useScreenSize).mockReturnValueOnce("tablet")
 
     const result = render(
       <BrowserRouter>
@@ -66,7 +85,7 @@ describe("Nav", () => {
   })
 
   test("renders nav item with title 'Search Map' if in map test group", () => {
-    ;(getTestGroups as jest.Mock).mockReturnValue([TestGroups.MapBeta])
+    jest.mocked(getTestGroups).mockReturnValue([TestGroups.MapBeta])
 
     render(
       <BrowserRouter>
@@ -79,6 +98,8 @@ describe("Nav", () => {
   })
 
   test("renders desktop nav content", () => {
+    jest.mocked(useScreenSize).mockReturnValueOnce("desktop")
+
     const result = render(
       <BrowserRouter>
         <Nav>Hello, world!</Nav>
diff --git a/assets/tests/components/nav/mobilePortraitNav.test.tsx b/assets/tests/components/nav/mobilePortraitNav.test.tsx
index 0be787836..00da35801 100644
--- a/assets/tests/components/nav/mobilePortraitNav.test.tsx
+++ b/assets/tests/components/nav/mobilePortraitNav.test.tsx
@@ -7,10 +7,6 @@ import MobilePortraitNav from "../../../src/components/nav/mobilePortraitNav"
 import { StateDispatchProvider } from "../../../src/contexts/stateDispatchContext"
 import { initialState } from "../../../src/state"
 import { BrowserRouter } from "react-router-dom"
-import vehicleFactory from "../../factories/vehicle"
-import stateFactory from "../../factories/applicationState"
-import { OpenView } from "../../../src/state/pagePanelState"
-import { viewFactory } from "../../factories/pagePanelStateFactory"
 
 describe("MobilePortraitNav", () => {
   test("renders top / bottom nav", () => {
@@ -18,7 +14,7 @@ describe("MobilePortraitNav", () => {
     const result = render(
       <StateDispatchProvider state={initialState} dispatch={dispatch}>
         <BrowserRouter>
-          <MobilePortraitNav />
+          <MobilePortraitNav isViewOpen={false} />
         </BrowserRouter>
       </StateDispatchProvider>
     )
@@ -27,63 +23,12 @@ describe("MobilePortraitNav", () => {
     expect(result.queryByTitle("Notifications")).toBeVisible()
   })
 
-  test("doesn't render top / bottom nav when a view is open", () => {
+  test("doesn't render top / bottom nav when a view or panel is open", () => {
     const dispatch = jest.fn()
     const result = render(
-      <StateDispatchProvider
-        state={stateFactory.build({
-          view: viewFactory.currentState({ openView: OpenView.Swings }).build(),
-        })}
-        dispatch={dispatch}
-      >
-        <BrowserRouter>
-          <MobilePortraitNav />
-        </BrowserRouter>
-      </StateDispatchProvider>
-    )
-
-    expect(result.queryByTitle("Swings View")).not.toBeVisible()
-    expect(result.queryByTitle("Notifications")).not.toBeVisible()
-  })
-
-  test("doesn't render top / bottom nav when a vehicle is selected", () => {
-    const dispatch = jest.fn()
-    const result = render(
-      <StateDispatchProvider
-        state={stateFactory.build({
-          view: viewFactory
-            .currentState({
-              selectedVehicleOrGhost: vehicleFactory.build(),
-            })
-            .build(),
-        })}
-        dispatch={dispatch}
-      >
-        <BrowserRouter>
-          <MobilePortraitNav />
-        </BrowserRouter>
-      </StateDispatchProvider>
-    )
-
-    expect(result.queryByTitle("Swings View")).not.toBeVisible()
-    expect(result.queryByTitle("Notifications")).not.toBeVisible()
-  })
-
-  test("doesn't render top / bottom nav when notification drawer is open", () => {
-    const dispatch = jest.fn()
-    const result = render(
-      <StateDispatchProvider
-        state={stateFactory.build({
-          view: viewFactory
-            .currentState({
-              openView: OpenView.NotificationDrawer,
-            })
-            .build(),
-        })}
-        dispatch={dispatch}
-      >
+      <StateDispatchProvider state={initialState} dispatch={dispatch}>
         <BrowserRouter>
-          <MobilePortraitNav />
+          <MobilePortraitNav isViewOpen={true} />
         </BrowserRouter>
       </StateDispatchProvider>
     )
diff --git a/assets/tests/components/viewHeader.test.tsx b/assets/tests/components/viewHeader.test.tsx
index a6346d471..d0b49a1d3 100644
--- a/assets/tests/components/viewHeader.test.tsx
+++ b/assets/tests/components/viewHeader.test.tsx
@@ -1,10 +1,12 @@
 import { jest, describe, test, expect } from "@jest/globals"
+import "@testing-library/jest-dom/jest-globals"
 import React from "react"
 import { render } from "@testing-library/react"
 import ViewHeader from "../../src/components/viewHeader"
 import userEvent from "@testing-library/user-event"
 import useScreenSize from "../../src/hooks/useScreenSize"
 import { OpenView } from "../../src/state/pagePanelState"
+import { DeviceType } from "../../src/skate"
 
 jest.mock("../../src/hooks/useScreenSize", () => ({
   __esModule: true,
@@ -23,24 +25,50 @@ describe("ViewHeader", () => {
     expect(close).toHaveBeenCalled()
   })
 
-  test("backlink doesn't render on non-mobile breakpoints", () => {
-    const close = jest.fn()
-    const followBacklink = jest.fn()
-
-    const result = render(
-      <ViewHeader
-        title="My View"
-        closeView={close}
-        backlinkToView={OpenView.Swings}
-        followBacklink={followBacklink}
-      />
-    )
-
-    expect(result.queryByTitle("Swings")).toBeNull()
-  })
+  test.each<DeviceType>(["mobile", "mobile_landscape_tablet_portrait"])(
+    "backlink renders on %s breakpoint",
+    (breakpoint) => {
+      jest.mocked(useScreenSize).mockReturnValueOnce(breakpoint)
+
+      const close = jest.fn()
+      const followBacklink = jest.fn()
+
+      const result = render(
+        <ViewHeader
+          title="My View"
+          closeView={close}
+          backlinkToView={OpenView.Swings}
+          followBacklink={followBacklink}
+        />
+      )
+
+      expect(result.getByTitle("Swings")).toBeInTheDocument()
+    }
+  )
+
+  test.each<DeviceType>(["tablet", "desktop"])(
+    "backlink doesn't render on %s breakpoint",
+    (breakpoint) => {
+      jest.mocked(useScreenSize).mockReturnValueOnce(breakpoint)
+
+      const close = jest.fn()
+      const followBacklink = jest.fn()
+
+      const result = render(
+        <ViewHeader
+          title="My View"
+          closeView={close}
+          backlinkToView={OpenView.Swings}
+          followBacklink={followBacklink}
+        />
+      )
+
+      expect(result.queryByTitle("Swings")).toBeNull()
+    }
+  )
 
   test("backlink doesn't render when there's no view to return to", () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -58,7 +86,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button invokes callback", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -79,7 +107,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button renders for Late View", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
@@ -97,7 +125,7 @@ describe("ViewHeader", () => {
   })
 
   test("backlink button render for notifications drawer", async () => {
-    ;(useScreenSize as jest.Mock).mockImplementationOnce(() => "mobile")
+    jest.mocked(useScreenSize).mockImplementationOnce(() => "mobile")
 
     const close = jest.fn()
     const followBacklink = jest.fn()
diff --git a/assets/tests/hooks/usePanelState.test.tsx b/assets/tests/hooks/usePanelState.test.tsx
index 03d8564a6..1b0b74bef 100644
--- a/assets/tests/hooks/usePanelState.test.tsx
+++ b/assets/tests/hooks/usePanelState.test.tsx
@@ -140,6 +140,50 @@ describe("usePanelStateForViewState", () => {
       expect(currentView).not.toEqual(otherState)
     })
   })
+
+  describe("isViewOpen", () => {
+    test("returns false when no view open", () => {
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.None,
+        selectedVehicleOrGhost: null,
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.currentState(pageViewState).build(),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeFalsy()
+    })
+
+    test("returns true when a view is open", () => {
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.Swings,
+        selectedVehicleOrGhost: null,
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.currentState(pageViewState).build(),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeTruthy()
+    })
+
+    test("returns true when a vehicle is selected", () => {
+      const pageViewState = pageViewFactory.build({
+        openView: OpenView.None,
+        selectedVehicleOrGhost: vehicleFactory.build(),
+      })
+
+      const { isViewOpen } = usePanelStateForViewState(
+        viewFactory.currentState(pageViewState).build(),
+        jest.fn()
+      )
+
+      expect(isViewOpen).toBeTruthy()
+    })
+  })
 })
 
 describe("usePanelStateFromStateDispatchContext", () => {
diff --git a/assets/tests/testHelpers/usePanelStateMocks.tsx b/assets/tests/testHelpers/usePanelStateMocks.tsx
index c13583930..fa7add1f3 100644
--- a/assets/tests/testHelpers/usePanelStateMocks.tsx
+++ b/assets/tests/testHelpers/usePanelStateMocks.tsx
@@ -15,7 +15,7 @@ export function mockUsePanelState(
     openLateView: jest.fn(),
     openSwingsView: jest.fn(),
     setTabMode: jest.fn(),
-
+    isViewOpen: false,
     ...(values || {}),
   })
 }