web: show mobile UI for tablet users

apps/web/src/components/editor/index.tsx

@@ -42,6 +42,7 @@ import { EV, EVENTS } from "@notesnook/core/common";
 import { db } from "../../common/db";
 import useMobile from "../../hooks/use-mobile";
 import Titlebox from "./title-box";
+import useTablet from "../../hooks/use-tablet";
 
 type PreviewSession = {
   content: { data: string; type: string };
@@ -83,6 +84,9 @@ export default function EditorManager({
   const isFocusMode = useAppStore((store) => store.isFocusMode);
   const isPreviewSession = !!previewSession.current;
 
+  const isMobile = useMobile();
+  const isTablet = useTablet();
+
   useEffect(() => {
     const event = db.eventManager.subscribe(
       EVENTS.syncItemMerged,
@@ -184,7 +188,8 @@ export default function EditorManager({
           readonly: isReadonly || isPreviewSession,
           onRequestFocus: () => toggleProperties(false),
           onLoadMedia: loadMedia,
-          focusMode: isFocusMode
+          focusMode: isFocusMode,
+          isMobile: isMobile || isTablet
         }}
       />
       {arePropertiesVisible && (
@@ -201,6 +206,7 @@ export default function EditorManager({
 }
 
 type EditorOptions = {
+  isMobile?: boolean;
   headless?: boolean;
   readonly?: boolean;
   focusMode?: boolean;
@@ -214,10 +220,11 @@ type EditorProps = {
 };
 export function Editor(props: EditorProps) {
   const { content, nonce, options } = props;
-  const { readonly, headless, onLoadMedia } = options || {
+  const { readonly, headless, onLoadMedia, isMobile } = options || {
     headless: false,
     readonly: false,
-    focusMode: false
+    focusMode: false,
+    isMobile: false
   };
 
   const editor = useEditorInstance();
@@ -259,6 +266,7 @@ export function Editor(props: EditorProps) {
   return (
     <EditorChrome {...props}>
       <Tiptap
+        isMobile={isMobile}
         nonce={nonce}
         readonly={readonly}
         toolbarContainerId={headless ? undefined : "editorToolbar"}
@@ -289,12 +297,13 @@ export function Editor(props: EditorProps) {
 
 function EditorChrome(props: PropsWithChildren<EditorProps>) {
   const { options, children } = props;
-  const { readonly, focusMode, headless, onRequestFocus } = options || {
-    headless: false,
-    readonly: false,
-    focusMode: false
-  };
-  const isMobile: boolean | null = useMobile();
+  const { readonly, focusMode, headless, onRequestFocus, isMobile } =
+    options || {
+      headless: false,
+      readonly: false,
+      focusMode: false,
+      isMobile: false
+    };
 
   if (headless) return <>{children}</>;
 
@@ -303,7 +312,7 @@ function EditorChrome(props: PropsWithChildren<EditorProps>) {
       <Toolbar />
       <FlexScrollContainer
         className="editorScroll"
-        style={{ display: "flex", flexDirection: "column" }}
+        style={{ display: "flex", flexDirection: "column", flex: 1 }}
       >
         <Flex
           variant="columnFill"

apps/web/src/components/editor/tiptap.tsx

@@ -66,6 +66,7 @@ type TipTapProps = {
   readonly?: boolean;
   nonce?: number;
   theme: Theme;
+  isMobile?: boolean;
 };
 
 const SAVE_INTERVAL = process.env.REACT_APP_TEST ? 100 : 300;
@@ -107,11 +108,11 @@ function TipTap(props: TipTapProps) {
     editorContainer,
     readonly,
     nonce,
-    theme
+    theme,
+    isMobile
   } = props;
 
   const isUserPremium = useIsUserPremium();
-  const isMobile = useMobile();
   const configure = useConfigureEditor();
   const doubleSpacedLines = useSettingsStore(
     (store) => store.doubleSpacedLines

apps/web/src/hooks/use-media-query.js

@@ -36,7 +36,7 @@ const useMediaQuery = (mediaQuery) => {
   if (!window.matchMedia) {
     // eslint-disable-next-line no-console
     console.warn(errorMessage);
-    return null;
+    return false;
   }
 
   const [isVerified, setIsVerified] = useState(