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,7 +122,13 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+      <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} />
@@ -129,6 +137,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
             <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;
   }
 

app/editor/components/FloatingToolbar.tsx

@@ -1,6 +1,7 @@
 import { NodeSelection } from "prosemirror-state";
 import { CellSelection, selectedRect } from "prosemirror-tables";
 import * as React from "react";
+import { Portal as ReactPortal } from "react-portal";
 import styled, { css } from "styled-components";
 import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
@@ -8,6 +9,8 @@ import { depths, s } from "@shared/styles";
 import { Portal } from "~/components/Portal";
 import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
+import useMobile from "~/hooks/useMobile";
+import useWindowSize from "~/hooks/useWindowSize";
 import Logger from "~/utils/Logger";
 import { useEditor } from "./EditorContext";
 
@@ -207,6 +210,32 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
     }
   });
 
+  const isMobile = useMobile();
+  const { height } = useWindowSize();
+
+  if (!props.children) {
+    return null;
+  }
+
+  if (isMobile) {
+    if (props.active) {
+      const rect = document.body.getBoundingClientRect();
+      return (
+        <ReactPortal>
+          <MobileWrapper
+            style={{
+              bottom: `calc(100% - ${height - rect.y}px)`,
+            }}
+          >
+            {props.children}
+          </MobileWrapper>
+        </ReactPortal>
+      );
+    }
+
+    return null;
+  }
+
   return (
     <Portal>
       <Wrapper
@@ -253,6 +282,28 @@ const arrow = (props: WrapperProps) =>
       `
     : "";
 
+const MobileWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  width: 100vw;
+  padding: 10px 6px;
+  background-color: ${s("menuBackground")};
+  border-top: 1px solid ${s("divider")};
+  box-sizing: border-box;
+  z-index: ${depths.editorToolbar};
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background-color: ${s("menuBackground")};
+  }
+`;
+
 const Wrapper = styled.div<WrapperProps>`
   will-change: opacity, transform;
   padding: 6px;

app/hooks/useEventListener.ts

@@ -12,7 +12,7 @@ import * as React from "react";
 export default function useEventListener<T extends EventListener>(
   eventName: string,
   handler: T,
-  element: Window | Node = window,
+  element: Window | VisualViewport | Node | null = window,
   options: AddEventListenerOptions = {}
 ) {
   const savedHandler = React.useRef<T>();

app/hooks/useWindowSize.ts

@@ -10,24 +10,25 @@ import useThrottledCallback from "./useThrottledCallback";
  */
 export default function useWindowSize() {
   const [windowSize, setWindowSize] = React.useState({
-    width: window.innerWidth,
-    height: window.innerHeight,
+    width: window.visualViewport?.width || window.innerWidth,
+    height: window.visualViewport?.height || window.innerHeight,
   });
 
   const handleResize = useThrottledCallback(() => {
+    const width = window.visualViewport?.width || window.innerWidth;
+    const height = window.visualViewport?.height || window.innerHeight;
+
     setWindowSize((state) => {
-      if (
-        window.innerWidth === state.width &&
-        window.innerHeight === state.height
-      ) {
+      if (width === state.width && height === state.height) {
         return state;
       }
 
-      return { width: window.innerWidth, height: window.innerHeight };
+      return { width, height };
     });
   }, 100);
 
   useEventListener("resize", handleResize);
+  useEventListener("resize", handleResize, window.visualViewport);
 
   // Call handler right away so state gets updated with initial window size
   React.useEffect(() => {

app/index.tsx

@@ -20,6 +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 Routes from "./routes";
 import Logger from "./utils/Logger";
 import history from "./utils/history";
@@ -60,7 +61,7 @@ if (element) {
                   <LazyPolyfill>
                     <LazyMotion features={loadFeatures}>
                       <Router history={history}>
-                        <>
+                        <MobileScrollWrapper>
                           <PageTheme />
                           <ScrollToTop>
                             <Routes />
@@ -68,7 +69,7 @@ if (element) {
                           <Toasts />
                           <Dialogs />
                           <Desktop />
-                        </>
+                        </MobileScrollWrapper>
                       </Router>
                     </LazyMotion>
                   </LazyPolyfill>

app/scenes/Document/components/SidebarLayout.tsx

@@ -2,11 +2,11 @@ import { observer } from "mobx-react";
 import { BackIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
 import styled from "styled-components";
 import { depths, s, ellipsis } from "@shared/styles";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import { Portal } from "~/components/Portal";
 import Scrollable from "~/components/Scrollable";
 import Tooltip from "~/components/Tooltip";
 import useMobile from "~/hooks/useMobile";
@@ -66,7 +66,7 @@ const Backdrop = styled.a`
   bottom: 0;
   right: 0;
   cursor: default;
-  z-index: ${depths.sidebar - 1};
+  z-index: ${depths.mobileSidebar - 1};
   background: ${s("backdrop")};
 `;
 

shared/styles/depths.ts

@@ -2,6 +2,7 @@ const depths = {
   header: 800,
   sidebar: 900,
   editorToolbar: 925,
+  mobileSidebar: 930,
   hoverPreview: 950,
   // Note: editor lightbox is z-index 999
   modalOverlay: 2000,