diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index c74ef73b52..574ec4eb91 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -2487,18 +2487,29 @@ class App extends React.Component { canFitSidebar: editorWidth > sidebarBreakpoint, }); + const stylesPanelMode = + // NOTE: we could also remove the isMobileOrTablet check here and + // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP) + // but not too narrow (> MQ_MAX_WIDTH_MOBILE) + this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet() + ? "compact" + : this.isMobileBreakpoint(editorWidth, editorHeight) + ? "mobile" + : "full"; + // also check if we need to update the app state - this.setState({ - stylesPanelMode: - // NOTE: we could also remove the isMobileOrTablet check here and - // always switch to compact mode when the editor is narrow (e.g. < MQ_MIN_WIDTH_DESKTOP) - // but not too narrow (> MQ_MAX_WIDTH_MOBILE) - this.isTabletBreakpoint(editorWidth, editorHeight) && isMobileOrTablet() - ? "compact" - : this.isMobileBreakpoint(editorWidth, editorHeight) - ? "mobile" - : "full", - }); + this.setState((prevState) => ({ + stylesPanelMode, + // reset to box selection mode if the UI changes to full + // where you'd not be able to change the mode yourself currently + preferredSelectionTool: + stylesPanelMode === "full" + ? { + type: "selection", + initialized: true, + } + : prevState.preferredSelectionTool, + })); if (prevEditorState !== nextEditorState) { this.device = { ...this.device, editor: nextEditorState };