root
/
excalidraw
mirror of https://github.com/excalidraw/excalidraw.git
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

fix: align MQ breakpoints and always use editor dimensions (#9991) 

* fix: align MQ breakpoints and always use editor dimensions

* naming

* update snapshots
This commit is contained in:
David Luzar 2025-09-17 09:57:10 +02:00 committed by GitHub
parent ac0d3059dc
commit a6a32b9b29
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
excalidraw-app/tests/MobileMenu.test.tsx
View File

@ -36,7 +36,7 @@ describe("Test MobileMenu", () => {
}, },
"isTouchScreen": false, "isTouchScreen": false,
"viewport": { "viewport": {
"isLandscape": false, "isLandscape": true,
"isMobile": true, "isMobile": true,
}, },
} }

7
packages/common/src/constants.ts
View File

@ -347,15 +347,12 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
// breakpoints // breakpoints
// ----------------------------------------------------------------------------- // -----------------------------------------------------------------------------
// md screen
export const MQ_MAX_WIDTH_LANDSCAPE = 1000;
export const MQ_MAX_HEIGHT_LANDSCAPE = 500;
// mobile: up to 699px // mobile: up to 699px
export const MQ_MAX_WIDTH_MOBILE = 699; export const MQ_MAX_MOBILE = 599;
// tablets // tablets
export const MQ_MIN_TABLET = 600; // lower bound (excludes phones) export const MQ_MIN_TABLET = MQ_MAX_MOBILE + 1; // lower bound (excludes phones)
export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops) export const MQ_MAX_TABLET = 1400; // upper bound (excludes laptops/desktops)
// desktop/laptop // desktop/laptop

18
packages/excalidraw/components/App.tsx
View File

@ -100,9 +100,7 @@ import {
MINIMUM_ARROW_SIZE, MINIMUM_ARROW_SIZE,
DOUBLE_TAP_POSITION_THRESHOLD, DOUBLE_TAP_POSITION_THRESHOLD,
isMobileOrTablet, isMobileOrTablet,
MQ_MAX_WIDTH_MOBILE, MQ_MAX_MOBILE,
MQ_MAX_HEIGHT_LANDSCAPE,
MQ_MAX_WIDTH_LANDSCAPE,
MQ_MIN_TABLET, MQ_MIN_TABLET,
MQ_MAX_TABLET, MQ_MAX_TABLET,
} from "@excalidraw/common"; } from "@excalidraw/common";
@ -2423,10 +2421,8 @@ class App extends React.Component<AppProps, AppState> {
}; };
private isMobileBreakpoint = (width: number, height: number) => { private isMobileBreakpoint = (width: number, height: number) => {
return ( const minSide = Math.min(width, height);
width <= MQ_MAX_WIDTH_MOBILE || return minSide <= MQ_MAX_MOBILE;
(height < MQ_MAX_HEIGHT_LANDSCAPE && width < MQ_MAX_WIDTH_LANDSCAPE)
);
}; };
private isTabletBreakpoint = (editorWidth: number, editorHeight: number) => { private isTabletBreakpoint = (editorWidth: number, editorHeight: number) => {
@ -2442,14 +2438,14 @@ class App extends React.Component<AppProps, AppState> {
return; return;
} }
const { clientWidth: viewportWidth, clientHeight: viewportHeight } = const { width: editorWidth, height: editorHeight } =
document.body; container.getBoundingClientRect();
const prevViewportState = this.device.viewport; const prevViewportState = this.device.viewport;
const nextViewportState = updateObject(prevViewportState, { const nextViewportState = updateObject(prevViewportState, {
isLandscape: viewportWidth > viewportHeight, isLandscape: editorWidth > editorHeight,
isMobile: this.isMobileBreakpoint(viewportWidth, viewportHeight), isMobile: this.isMobileBreakpoint(editorWidth, editorHeight),
}); });
if (prevViewportState !== nextViewportState) { if (prevViewportState !== nextViewportState) {