feat: use component dimensions to break to mobile (#3414)

Co-authored-by: Jed Fox <git@jedfox.com>

src/packages/excalidraw/CHANGELOG.md

@@ -11,6 +11,14 @@ The change should be grouped under one of the below section and must contain PR
 Please add the latest change on the top under the correct section.
 -->
 
+## Unreleased
+
+## Excalidraw Library
+
+### Features
+
+- App now breaks into mobile view using the component dimensions, not viewport dimensions. This fixes a case where the app would break sooner than necessary when the component's size is smaller than viewport [#3414](https://github.com/excalidraw/excalidraw/pull/3414).
+
 ## 0.6.0 (2021-04-04)
 
 ## Excalidraw API

src/packages/excalidraw/index.tsx

@@ -8,7 +8,6 @@ import "../../css/app.scss";
 import "../../css/styles.scss";
 
 import { ExcalidrawAPIRefValue, ExcalidrawProps } from "../../types";
-import { IsMobileProvider } from "../../is-mobile";
 import { defaultLang } from "../../i18n";
 import { DEFAULT_UI_OPTIONS } from "../../constants";
 
@@ -61,27 +60,25 @@ const Excalidraw = (props: ExcalidrawProps) => {
 
   return (
     <InitializeApp langCode={langCode}>
-      <IsMobileProvider>
-        <App
-          onChange={onChange}
-          initialData={initialData}
-          excalidrawRef={excalidrawRef}
-          onCollabButtonClick={onCollabButtonClick}
-          isCollaborating={isCollaborating}
-          onPointerUpdate={onPointerUpdate}
-          onExportToBackend={onExportToBackend}
-          renderFooter={renderFooter}
-          langCode={langCode}
-          viewModeEnabled={viewModeEnabled}
-          zenModeEnabled={zenModeEnabled}
-          gridModeEnabled={gridModeEnabled}
-          libraryReturnUrl={libraryReturnUrl}
-          theme={theme}
-          name={name}
-          renderCustomStats={renderCustomStats}
-          UIOptions={UIOptions}
-        />
-      </IsMobileProvider>
+      <App
+        onChange={onChange}
+        initialData={initialData}
+        excalidrawRef={excalidrawRef}
+        onCollabButtonClick={onCollabButtonClick}
+        isCollaborating={isCollaborating}
+        onPointerUpdate={onPointerUpdate}
+        onExportToBackend={onExportToBackend}
+        renderFooter={renderFooter}
+        langCode={langCode}
+        viewModeEnabled={viewModeEnabled}
+        zenModeEnabled={zenModeEnabled}
+        gridModeEnabled={gridModeEnabled}
+        libraryReturnUrl={libraryReturnUrl}
+        theme={theme}
+        name={name}
+        renderCustomStats={renderCustomStats}
+        UIOptions={UIOptions}
+      />
     </InitializeApp>
   );
 };