From ea3c2374a13097da929950449e63f4f53e659fb0 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 25 Aug 2025 13:51:40 +1000
Subject: [PATCH] add isTouchMobile to device

---
 packages/excalidraw/components/App.tsx     | 10 ++++++++++
 packages/excalidraw/components/LayerUI.tsx |  2 +-
 packages/excalidraw/types.ts               |  2 ++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index d0fe01db9..98d0a1206 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -473,10 +473,12 @@ const deviceContextInitialValue = {
   viewport: {
     isMobile: false,
     isLandscape: false,
+    isTablet: false,
   },
   editor: {
     isMobile: false,
     canFitSidebar: false,
+    isTablet: false,
   },
   isTouchScreen: false,
 };
@@ -2422,6 +2424,12 @@ class App extends React.Component<AppProps, AppState> {
     return isMobile || isTouchMobile;
   };
 
+  private isTablet = (): boolean => {
+    const { clientWidth: viewportWidth } = document.body;
+
+    return this.isMobileOrTablet() && viewportWidth > MQ_MAX_WIDTH_PORTRAIT;
+  };
+
   private isMobileBreakpoint = (width: number, height: number) => {
     return (
       width < MQ_MAX_WIDTH_PORTRAIT ||
@@ -2443,6 +2451,7 @@ class App extends React.Component<AppProps, AppState> {
     const nextViewportState = updateObject(prevViewportState, {
       isLandscape: viewportWidth > viewportHeight,
       isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight),
+      isTablet: this.isTablet(),
     });
 
     if (prevViewportState !== nextViewportState) {
@@ -2471,6 +2480,7 @@ class App extends React.Component<AppProps, AppState> {
     const nextEditorState = updateObject(prevEditorState, {
       isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
       canFitSidebar: editorWidth > sidebarBreakpoint,
+      isTablet: this.isTablet(),
     });
 
     if (prevEditorState !== nextEditorState) {
diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx
index 86118a6ec..2e973e8fa 100644
--- a/packages/excalidraw/components/LayerUI.tsx
+++ b/packages/excalidraw/components/LayerUI.tsx
@@ -284,7 +284,7 @@ const LayerUI = ({
           <Stack.Col gap={6} className={clsx("App-menu_top__left")}>
             {renderCanvasActions()}
             {shouldRenderSelectedShapeActions &&
-              renderSelectedShapeActions(device.isTouchScreen)}
+              renderSelectedShapeActions(device.editor.isTablet)}
           </Stack.Col>
           {!appState.viewModeEnabled &&
             appState.openDialog?.name !== "elementLinkSelector" && (
diff --git a/packages/excalidraw/types.ts b/packages/excalidraw/types.ts
index 8820aa459..a19b88ba2 100644
--- a/packages/excalidraw/types.ts
+++ b/packages/excalidraw/types.ts
@@ -879,9 +879,11 @@ export type Device = Readonly<{
   viewport: {
     isMobile: boolean;
     isLandscape: boolean;
+    isTablet: boolean;
   };
   editor: {
     isMobile: boolean;
+    isTablet: boolean;
     canFitSidebar: boolean;
   };
   isTouchScreen: boolean;