fix(app): scroll to top of screen whenever route is changed (#16230)

fix RQA-3153, RQA-3139
Opentrons · Sep 10, 2024 · 9d9c360 · 9d9c360
1 parent ff6a36f
commit 9d9c360
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/app/src/App/OnDeviceDisplayApp.tsx b/app/src/App/OnDeviceDisplayApp.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { Routes, Route, Navigate } from 'react-router-dom'
+import { Routes, Route, Navigate, useLocation } from 'react-router-dom'
 import { css } from 'styled-components'
 import { ErrorBoundary } from 'react-error-boundary'
 
@@ -225,6 +225,14 @@ export function OnDeviceDisplayAppRoutes(): JSX.Element {
     setCurrentNode(node)
   }, [])
   const isScrolling = useScrolling(currentNode)
+  const location = useLocation()
+  React.useEffect(() => {
+    currentNode?.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'auto',
+    })
+  }, [location.pathname])
 
   const { unfinishedUnboxingFlowRoute } = useSelector(
     getOnDeviceDisplaySettings

diff --git a/app/src/pages/ProtocolDashboard/index.tsx b/app/src/pages/ProtocolDashboard/index.tsx
@@ -182,14 +182,15 @@ export function ProtocolDashboard(): JSX.Element {
                 alignItems={ALIGN_CENTER}
                 backgroundColor={COLORS.white}
                 flexDirection={DIRECTION_ROW}
+                paddingTop={SPACING.spacing16}
                 paddingBottom={SPACING.spacing16}
                 position={
                   navMenuIsOpened || longPressModalIsOpened
                     ? POSITION_STATIC
                     : POSITION_STICKY
                 }
                 top="7.75rem"
-                zIndex={navMenuIsOpened || longPressModalIsOpened ? 0 : 3}
+                zIndex={navMenuIsOpened || longPressModalIsOpened ? 0 : 2.5}
                 width="100%"
               >
                 <Flex width="32.3125rem">

diff --git a/app/src/pages/QuickTransferDashboard/index.tsx b/app/src/pages/QuickTransferDashboard/index.tsx
@@ -245,14 +245,15 @@ export function QuickTransferDashboard(): JSX.Element {
                 justifyContent={JUSTIFY_SPACE_BETWEEN}
                 backgroundColor={COLORS.white}
                 flexDirection={DIRECTION_ROW}
+                paddingTop={SPACING.spacing16}
                 paddingBottom={SPACING.spacing16}
                 position={
                   navMenuIsOpened || longPressModalIsOpened
                     ? POSITION_STATIC
                     : POSITION_STICKY
                 }
                 top="7.75rem"
-                zIndex={navMenuIsOpened || longPressModalIsOpened ? 0 : 3}
+                zIndex={navMenuIsOpened || longPressModalIsOpened ? 0 : 2.5}
                 width="100%"
               >
                 <Flex width="32.3125rem">