fix: Positioning of editing toolbar on mobile devices (#6279)

app/components/AuthenticatedLayout.tsx

@@ -26,6 +26,7 @@ import {
   matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
+import { PortalContext } from "./Portal";
 
 const DocumentComments = lazyWithRetry(
   () => import("~/scenes/Document/components/Comments")
@@ -45,6 +46,7 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
+  const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
@@ -120,15 +122,22 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={goToSearch} />
-        <RegisterKeyDown trigger="/" handler={goToSearch} />
-        {children}
-        <React.Suspense fallback={null}>
-          <CommandBar />
-        </React.Suspense>
-      </Layout>
+      <PortalContext.Provider value={layoutRef.current}>
+        <Layout
+          title={team.name}
+          sidebar={sidebar}
+          sidebarRight={sidebarRight}
+          ref={layoutRef}
+        >
+          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+          <RegisterKeyDown trigger="t" handler={goToSearch} />
+          <RegisterKeyDown trigger="/" handler={goToSearch} />
+          {children}
+          <React.Suspense fallback={null}>
+            <CommandBar />
+          </React.Suspense>
+        </Layout>
+      </PortalContext.Provider>
     </DocumentContext.Provider>
   );
 };

app/components/Button.tsx

@@ -171,7 +171,7 @@ const Button = <T extends React.ElementType = "button">(
     danger,
     ...rest
   } = props;
-  const hasText = children !== undefined || value !== undefined;
+  const hasText = !!children || value !== undefined;
   const ic = hideIcon ? undefined : action?.icon ?? icon;
   const hasIcon = ic !== undefined;
 

app/components/Layout.tsx

@@ -22,12 +22,10 @@ type Props = {
   sidebarRight?: React.ReactNode;
 };
 
-const Layout: React.FC<Props> = ({
-  title,
-  children,
-  sidebar,
-  sidebarRight,
-}: Props) => {
+const Layout = React.forwardRef(function Layout_(
+  { title, children, sidebar, sidebarRight }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
 
@@ -40,7 +38,7 @@ const Layout: React.FC<Props> = ({
   });
 
   return (
-    <Container column auto>
+    <Container column auto ref={ref}>
       <Helmet>
         <title>{title ? title : env.APP_NAME}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -75,7 +73,7 @@ const Layout: React.FC<Props> = ({
       </Container>
     </Container>
   );
-};
+});
 
 const Container = styled(Flex)`
   background: ${s("background")};

app/components/MobileScrollWrapper.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import styled from "styled-components";
+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();
+  return isMobile ? <MobileWrapper>{children}</MobileWrapper> : <>{children}</>;
+};
+
+export default MobileScrollWrapper;

app/components/Sidebar/Right.tsx

@@ -134,7 +134,7 @@ const Sidebar = styled(m.div)<{
     top: 0;
     right: 0;
     bottom: 0;
-    z-index: ${depths.sidebar};
+    z-index: ${depths.mobileSidebar};
   `}
 
   ${breakpoint("tablet")`

app/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,5 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { Portal } from "react-portal";
 import { useLocation } from "react-router-dom";
 import styled, { css, useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -192,11 +191,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
         onPointerLeave={handlePointerLeave}
         column
       >
-        {ui.mobileSidebarVisible && (
-          <Portal>
-            <Backdrop onClick={ui.toggleMobileSidebar} />
-          </Portal>
-        )}
         {children}
 
         {user && (
@@ -235,6 +229,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
           onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
         />
       </Container>
+      {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
     </>
   );
 });
@@ -247,7 +242,7 @@ const Backdrop = styled.a`
   bottom: 0;
   right: 0;
   cursor: default;
-  z-index: ${depths.sidebar - 1};
+  z-index: ${depths.mobileSidebar - 1};
   background: ${s("backdrop")};
 `;
 
@@ -288,7 +283,7 @@ const Container = styled(Flex)<ContainerProps>`
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
   );
-  z-index: ${depths.sidebar};
+  z-index: ${depths.mobileSidebar};
   max-width: 80%;
   min-width: 280px;
   ${fadeOnDesktopBackgrounded()}
@@ -303,6 +298,7 @@ const Container = styled(Flex)<ContainerProps>`
   }
 
   ${breakpoint("tablet")`
+    z-index: ${depths.sidebar};
     margin: 0;
     min-width: 0;
     transform: translateX(${(props: ContainerProps) =>

app/components/Tooltip.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { roundArrow } from "tippy.js";
 import { s } from "@shared/styles";
+import useMobile from "~/hooks/useMobile";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
   tooltip?: React.ReactChild | React.ReactChild[];
@@ -10,9 +11,11 @@ export type Props = Omit<TippyProps, "content" | "theme"> & {
 };
 
 function Tooltip({ shortcut, tooltip, delay = 50, ...rest }: Props) {
+  const isMobile = useMobile();
+
   let content = <>{tooltip}</>;
 
-  if (!tooltip) {
+  if (!tooltip || isMobile) {
     return rest.children ?? null;
   }