refactor and fix test

excalidraw-app/tests/MobileMenu.test.tsx

@@ -17,7 +17,6 @@ describe("Test MobileMenu", () => {
 
   beforeEach(async () => {
     await render(<ExcalidrawApp />);
-    // @ts-ignore
     h.app.refreshEditorInterface();
   });
 
@@ -26,20 +25,7 @@ describe("Test MobileMenu", () => {
   });
 
   it("should set editor interface correctly", () => {
-    expect(h.app.editorInterface).toMatchInlineSnapshot(`
+    expect(h.app.editorInterface.formFactor).toBe("phone");
-      {
-        "canFitSidebar": false,
-        "desktopUIMode": "full",
-        "formFactor": "desktop",
-        "isLandscape": true,
-        "isTouchScreen": false,
-        "userAgent": {
-          "isMobileDevice": false,
-          "platform": "other",
-          "raw": "Mozilla/5.0 (darwin) AppleWebKit/537.36 (KHTML, like Gecko) jsdom/22.1.0",
-        },
-      }
-    `);
   });
 
   it("should initialize with welcome screen and hide once user interacts", async () => {

packages/common/src/editorInterface.ts

@@ -80,7 +80,7 @@ export const isTabletBreakpoint = (
   return minSide >= MQ_MIN_TABLET && maxSide <= MQ_MAX_TABLET;
 };
 
-export const isMobileOrTablet = (): boolean => {
+const isMobileOrTablet = (): boolean => {
   const ua = navigator.userAgent || "";
   const platform = navigator.platform || "";
   const uaData = (navigator as any).userAgentData as

packages/element/src/transformHandles.ts

@@ -1,6 +1,5 @@
 import {
   DEFAULT_TRANSFORM_HANDLE_SPACING,
-  isMobileOrTablet,
   type EditorInterface,
 } from "@excalidraw/common";
 
@@ -329,6 +328,7 @@ export const getTransformHandles = (
 export const hasBoundingBox = (
   elements: readonly NonDeletedExcalidrawElement[],
   appState: InteractiveCanvasAppState,
+  editorInterface: EditorInterface,
 ) => {
   if (appState.selectedLinearElement?.isEditing) {
     return false;
@@ -347,5 +347,5 @@ export const hasBoundingBox = (
 
   // on mobile/tablet we currently don't show bbox because of resize issues
   // (also prob best for simplicity's sake)
-  return element.points.length > 2 && !isMobileOrTablet();
+  return element.points.length > 2 && !editorInterface.userAgent.isMobileDevice;
 };

packages/excalidraw/components/App.tsx

@@ -105,7 +105,6 @@ import {
   type StylesPanelMode,
   loadDesktopUIModePreference,
   setDesktopUIMode,
-  isMobileOrTablet,
 } from "@excalidraw/common";
 
 import {
@@ -701,19 +700,7 @@ class App extends React.Component<AppProps, AppState> {
       height: window.innerHeight,
     };
 
-    const storedDesktopUIMode = loadDesktopUIModePreference();
+    this.refreshEditorInterface();
-    const userAgentDescriptor = createUserAgentDescriptor(
-      typeof navigator !== "undefined" ? navigator.userAgent : "",
-    );
-    // allow host app to control formFactor and desktopUIMode via props
-    this.editorInterface = updateObject(this.editorInterface, {
-      desktopUIMode:
-        props.UIOptions.desktopUIMode ??
-        storedDesktopUIMode ??
-        this.editorInterface.desktopUIMode,
-      formFactor: this.getFormFactor(),
-      userAgent: userAgentDescriptor,
-    });
     this.stylesPanelMode = deriveStylesPanelMode(this.editorInterface);
 
     this.id = nanoid();
@@ -2455,14 +2442,14 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private getFormFactor = () => {
+  private getFormFactor = (editorWidth: number, editorHeight: number) => {
-    const { width, height } = this.state;
+    return (
-    return this.props.UIOptions.formFactor ?? isTestEnv()
+      this.props.UIOptions.formFactor ??
-      ? "desktop"
+      getFormFactor(editorWidth, editorHeight)
-      : getFormFactor(width, height);
+    );
   };
 
-  private refreshEditorInterface = () => {
+  public refreshEditorInterface = () => {
     const container = this.excalidrawContainerRef.current;
     if (!container) {
       return;
@@ -2471,22 +2458,28 @@ class App extends React.Component<AppProps, AppState> {
     const { width: editorWidth, height: editorHeight } =
       container.getBoundingClientRect();
 
+    const storedDesktopUIMode = loadDesktopUIModePreference();
+    const userAgentDescriptor = createUserAgentDescriptor(
+      typeof navigator !== "undefined" ? navigator.userAgent : "",
+    );
+    // allow host app to control formFactor and desktopUIMode via props
     const sidebarBreakpoint =
       this.props.UIOptions.dockedSidebarBreakpoint != null
         ? this.props.UIOptions.dockedSidebarBreakpoint
         : MQ_RIGHT_SIDEBAR_MIN_WIDTH;
-
     const nextEditorInterface = updateObject(this.editorInterface, {
-      formFactor: this.getFormFactor(),
+      desktopUIMode:
+        this.props.UIOptions.desktopUIMode ??
+        storedDesktopUIMode ??
+        this.editorInterface.desktopUIMode,
+      formFactor: this.getFormFactor(editorWidth, editorHeight),
+      userAgent: userAgentDescriptor,
       canFitSidebar: editorWidth > sidebarBreakpoint,
       isLandscape: editorWidth > editorHeight,
     });
-    const didChange = nextEditorInterface !== this.editorInterface;
+
-    if (didChange) {
+    this.editorInterface = nextEditorInterface;
-      this.editorInterface = nextEditorInterface;
+    this.reconcileStylesPanelMode(nextEditorInterface);
-      this.reconcileStylesPanelMode(nextEditorInterface);
-    }
-    return didChange;
   };
 
   private reconcileStylesPanelMode = (nextEditorInterface: EditorInterface) => {
@@ -2585,15 +2578,6 @@ class App extends React.Component<AppProps, AppState> {
       this.focusContainer();
     }
 
-    if (
-      // bounding rects don't work in tests so updating
-      // the state on init would result in making the test enviro run
-      // in mobile breakpoint (0 width/height), making everything fail
-      !isTestEnv()
-    ) {
-      this.refreshEditorInterface();
-    }
-
     if (supportsResizeObserver && this.excalidrawContainerRef.current) {
       this.resizeObserver = new ResizeObserver(() => {
         this.refreshEditorInterface();
@@ -2810,13 +2794,6 @@ class App extends React.Component<AppProps, AppState> {
       this.setState({ showWelcomeScreen: true });
     }
 
-    if (
-      prevProps.UIOptions.dockedSidebarBreakpoint !==
-      this.props.UIOptions.dockedSidebarBreakpoint
-    ) {
-      this.refreshEditorInterface();
-    }
-
     const hasFollowedPersonLeft =
       prevState.userToFollow &&
       !this.state.collaborators.has(prevState.userToFollow.socketId);
@@ -5257,7 +5234,7 @@ class App extends React.Component<AppProps, AppState> {
     if (
       considerBoundingBox &&
       this.state.selectedElementIds[element.id] &&
-      hasBoundingBox([element], this.state)
+      hasBoundingBox([element], this.state, this.editorInterface)
     ) {
       // if hitting the bounding box, return early
       // but if not, we should check for other cases as well (e.g. frame name)
@@ -6165,7 +6142,8 @@ class App extends React.Component<AppProps, AppState> {
         // better way of showing them is found
         !(
           isLinearElement(selectedElements[0]) &&
-          (isMobileOrTablet() || selectedElements[0].points.length === 2)
+          (this.editorInterface.userAgent.isMobileDevice ||
+            selectedElements[0].points.length === 2)
         )
       ) {
         const elementWithTransformHandleType =
@@ -7290,7 +7268,8 @@ class App extends React.Component<AppProps, AppState> {
         !isElbowArrow(selectedElements[0]) &&
         !(
           isLinearElement(selectedElements[0]) &&
-          (isMobileOrTablet() || selectedElements[0].points.length === 2)
+          (this.editorInterface.userAgent.isMobileDevice ||
+            selectedElements[0].points.length === 2)
         ) &&
         !(
           this.state.selectedLinearElement &&

packages/excalidraw/renderer/interactiveScene.ts

@@ -892,7 +892,11 @@ const _renderInteractiveScene = ({
 
   // Paint selected elements
   if (!appState.multiElement && !appState.selectedLinearElement?.isEditing) {
-    const showBoundingBox = hasBoundingBox(selectedElements, appState);
+    const showBoundingBox = hasBoundingBox(
+      selectedElements,
+      appState,
+      editorInterface,
+    );
 
     const isSingleLinearElementSelected =
       selectedElements.length === 1 && isLinearElement(selectedElements[0]);

packages/excalidraw/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -118,7 +118,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -548,7 +548,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -957,7 +957,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -1525,7 +1525,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -1739,7 +1739,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -2122,7 +2122,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -2367,7 +2367,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -2551,7 +2551,7 @@ exports[`regression tests > can drag element that covers another element, while
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -2876,7 +2876,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -3135,7 +3135,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -3378,7 +3378,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -3616,7 +3616,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -3877,7 +3877,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -4192,7 +4192,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -4657,7 +4657,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -4914,7 +4914,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -5219,7 +5219,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -5401,7 +5401,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -5603,7 +5603,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -6002,7 +6002,7 @@ exports[`regression tests > drags selected elements from point inside common bou
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -6295,7 +6295,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -7158,7 +7158,7 @@ exports[`regression tests > given a group of selected elements with an element t
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -7494,7 +7494,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -7774,7 +7774,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -8011,7 +8011,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -8251,7 +8251,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -8433,7 +8433,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -8615,7 +8615,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -8824,7 +8824,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -9056,7 +9056,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -9257,7 +9257,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -9484,7 +9484,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -9689,7 +9689,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -9898,7 +9898,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -10101,7 +10101,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -10281,7 +10281,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -10481,7 +10481,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -10671,7 +10671,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -11198,7 +11198,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -11476,7 +11476,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -11603,7 +11603,7 @@ exports[`regression tests > shift click on selected element should deselect it o
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -11809,7 +11809,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -12132,7 +12132,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -12567,7 +12567,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -13200,7 +13200,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -13329,7 +13329,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -13991,7 +13991,7 @@ exports[`regression tests > switches from group of selected elements to another
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -14331,7 +14331,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -14565,7 +14565,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -14692,7 +14692,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -15084,7 +15084,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,
@@ -15212,7 +15212,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "userToFollow": null,
   "viewBackgroundColor": "#ffffff",
   "viewModeEnabled": false,
-  "width": 1024,
+  "width": 1440,
   "zenModeEnabled": false,
   "zoom": {
     "value": 1,

packages/excalidraw/tests/regressionTests.test.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 import { vi } from "vitest";
 
-import { FONT_FAMILY, CODES, KEYS, reseed } from "@excalidraw/common";
+import {
+  FONT_FAMILY,
+  CODES,
+  KEYS,
+  reseed,
+  MQ_MIN_WIDTH_DESKTOP,
+} from "@excalidraw/common";
 
 import { setDateTimeForTests } from "@excalidraw/common";
 
@@ -60,7 +66,7 @@ beforeEach(async () => {
   finger2.reset();
 
   await render(<Excalidraw handleKeyboardGlobally={true} />);
-  API.setAppState({ height: 768, width: 1024 });
+  API.setAppState({ height: 768, width: MQ_MIN_WIDTH_DESKTOP });
 });
 
 afterEach(() => {

packages/excalidraw/tests/test-utils.ts

@@ -189,20 +189,20 @@ export const withExcalidrawDimensions = async (
   dimensions: { width: number; height: number },
   cb: () => void,
 ) => {
+  const { h } = window;
+
   mockBoundingClientRect(dimensions);
   act(() => {
-    // @ts-ignore
     h.app.refreshEditorInterface();
-    window.h.app.refresh();
+    h.app.refresh();
   });
 
   await cb();
 
   restoreOriginalGetBoundingClientRect();
   act(() => {
-    // @ts-ignore
     h.app.refreshEditorInterface();
-    window.h.app.refresh();
+    h.app.refresh();
   });
 };