fix: Mobile toolbar appears on Windows touchscreen

fix: Improve mobile toolbar

app/editor/components/FloatingToolbar.tsx

@@ -8,9 +8,6 @@ import { depths, s } from "@shared/styles";
 import { Portal } from "~/components/Portal";
 import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
-import useMediaQuery from "~/hooks/useMediaQuery";
-import useMobile from "~/hooks/useMobile";
-import useViewportHeight from "~/hooks/useViewportHeight";
 import Logger from "~/utils/Logger";
 import { useEditor } from "./EditorContext";
 
@@ -40,28 +37,11 @@ function usePosition({
   const { view } = useEditor();
   const { selection } = view.state;
   const { width: menuWidth, height: menuHeight } = useComponentSize(menuRef);
-  const viewportHeight = useViewportHeight();
-  const isMobile = useMobile();
-  const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)");
 
   if (!active || !menuWidth || !menuHeight || !menuRef.current) {
     return defaultPosition;
   }
 
-  // If we're on a mobile device then stick the floating toolbar to the bottom
-  // of the screen above the virtual keyboard.
-  if (isTouchDevice && isMobile && viewportHeight) {
-    return {
-      left: 0,
-      right: 0,
-      top: viewportHeight - menuHeight,
-      offset: 0,
-      maxWidth: 1000,
-      blockSelection: false,
-      visible: true,
-    };
-  }
-
   // based on the start and end of the selection calculate the position at
   // the center top
   let fromPos;
@@ -194,7 +174,7 @@ function usePosition({
       left: Math.round(left - offsetParent.left),
       top: Math.round(top - offsetParent.top),
       offset: Math.round(offset),
-      maxWidth: offsetParent.width,
+      maxWidth: Math.min(window.innerWidth - margin * 2, offsetParent.width),
       blockSelection: codeBlock || isColSelection || isRowSelection,
       visible: true,
     };
@@ -290,6 +270,7 @@ const Wrapper = styled.div<WrapperProps>`
   box-sizing: border-box;
   pointer-events: none;
   white-space: nowrap;
+  overflow: hidden;
 
   ${arrow}
 
@@ -307,18 +288,6 @@ const Wrapper = styled.div<WrapperProps>`
   @media print {
     display: none;
   }
-
-  @media (hover: none) and (pointer: coarse) {
-    &:before {
-      display: none;
-    }
-
-    transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    transform: scale(1);
-    border-radius: 0;
-    width: 100vw;
-    position: fixed;
-  }
 `;
 
 export default FloatingToolbar;