diff --git a/packages/common/src/editorInterface.ts b/packages/common/src/editorInterface.ts index 36b55d9182..d22a700ab5 100644 --- a/packages/common/src/editorInterface.ts +++ b/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"; diff --git a/packages/excalidraw/package.json b/packages/excalidraw/package.json index 5f3d6b2684..4c1558e2f8 100644 --- a/packages/excalidraw/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index edd96b0405..02220560fb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6398,6 +6398,11 @@ is-map@^2.0.3: resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.3.tgz#ede96b7fe1e270b3c4465e3a465658764926d62e" integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw== +is-mobile@5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-5.0.0.tgz#1e08a0ef2c38a67bff84a52af68d67bcef445333" + integrity sha512-Tz/yndySvLAEXh+Uk8liFCxOwVH6YutuR74utvOcu7I9Di+DwM0mtdPVZNaVvvBUM2OXxne/NhOs1zAO7riusQ== + is-module@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"