fix: Scroll does not reset when navigating shared docs on mobile (#7037)

closes #6968

app/components/MobileScrollWrapper.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import useMediaQuery from "~/hooks/useMediaQuery";
-import useMobile from "~/hooks/useMobile";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-const MobileWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
-
-const MobileScrollWrapper = ({ children }: Props) => {
-  const isMobile = useMobile();
-  const isPrinting = useMediaQuery("print");
-
-  return isMobile && !isPrinting ? (
-    <MobileWrapper>{children}</MobileWrapper>
-  ) : (
-    <>{children}</>
-  );
-};
-
-export default MobileScrollWrapper;

app/components/PageScroll.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import styled from "styled-components";
+import useMediaQuery from "~/hooks/useMediaQuery";
+import useMobile from "~/hooks/useMobile";
+import ScrollContext from "./ScrollContext";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const MobileWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+
+/**
+ * A component that wraps its children in a scrollable container on mobile devices.
+ * This allows us to place a fixed toolbar at the bottom of the page in the document
+ * editor, which would otherwise be obscured by the on-screen keyboard.
+ *
+ * On desktop devices, the children are rendered directly without any wrapping.
+ */
+const PageScroll = ({ children }: Props) => {
+  const isMobile = useMobile();
+  const isPrinting = useMediaQuery("print");
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  return isMobile && !isPrinting ? (
+    <ScrollContext.Provider value={ref}>
+      <MobileWrapper ref={ref}>{children}</MobileWrapper>
+    </ScrollContext.Provider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default PageScroll;

app/components/ScrollContext.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+/**
+ * Context to provide a reference to the scrollable container
+ */
+const ScrollContext = React.createContext<
+  React.RefObject<HTMLDivElement> | undefined
+>(undefined);
+
+/**
+ * Hook to get the scrollable container reference
+ */
+export const useScrollContext = () => React.useContext(ScrollContext);
+
+export default ScrollContext;

app/components/ScrollToTop.ts

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { useLocation } from "react-router-dom";
 import usePrevious from "~/hooks/usePrevious";
+import { useScrollContext } from "./ScrollContext";
 
 type Props = {
   children: JSX.Element;
@@ -10,6 +11,7 @@ type Props = {
 export default function ScrollToTop({ children }: Props) {
   const location = useLocation<{ retainScrollPosition?: boolean }>();
   const previousLocationPathname = usePrevious(location.pathname);
+  const scrollContainerRef = useScrollContext();
 
   React.useEffect(() => {
     if (
@@ -25,8 +27,9 @@ export default function ScrollToTop({ children }: Props) {
     ) {
       return;
     }
-    window.scrollTo(0, 0);
+    (scrollContainerRef?.current || window).scrollTo(0, 0);
   }, [
+    scrollContainerRef,
     location.pathname,
     previousLocationPathname,
     location.state?.retainScrollPosition,

app/index.tsx

@@ -20,7 +20,7 @@ import env from "~/env";
 import { initI18n } from "~/utils/i18n";
 import Desktop from "./components/DesktopEventHandler";
 import LazyPolyfill from "./components/LazyPolyfills";
-import MobileScrollWrapper from "./components/MobileScrollWrapper";
+import PageScroll from "./components/PageScroll";
 import Routes from "./routes";
 import Logger from "./utils/Logger";
 import history from "./utils/history";
@@ -61,7 +61,7 @@ if (element) {
                   <LazyPolyfill>
                     <LazyMotion features={loadFeatures}>
                       <Router history={history}>
-                        <MobileScrollWrapper>
+                        <PageScroll>
                           <PageTheme />
                           <ScrollToTop>
                             <Routes />
@@ -69,7 +69,7 @@ if (element) {
                           <Toasts />
                           <Dialogs />
                           <Desktop />
-                        </MobileScrollWrapper>
+                        </PageScroll>
                       </Router>
                     </LazyMotion>
                   </LazyPolyfill>