fix: More robust mobile and tablet detection

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

packages/common/src/editorInterface.ts

@@ -1,3 +1,5 @@
+import mobile from "is-mobile";
+
 export type StylesPanelMode = "compact" | "full" | "mobile";
 
 export type EditorInterface = Readonly<{
@@ -139,12 +141,13 @@ export const getFormFactor = (
   editorWidth: number,
   editorHeight: number,
 ): EditorInterface["formFactor"] => {
-  if (isMobileBreakpoint(editorWidth, editorHeight)) {
+  if (mobile()) {
     return "phone";
-  }
-
-  if (isTabletBreakpoint(editorWidth, editorHeight)) {
+  } else if (mobile({ tablet: true })) {
     return "tablet";
+  } else if (isMobileBreakpoint(editorWidth, editorHeight)) {
+    // NOTE: Very small editor sizes should be treated as phone
+    return "phone";
   }
 
   return "desktop";

packages/excalidraw/package.json

@@ -95,6 +95,7 @@
     "fractional-indexing": "3.2.0",
     "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
+    "is-mobile": "5.0.0",
     "jotai": "2.11.0",
     "jotai-scope": "0.7.2",
     "lodash.debounce": "4.0.8",