fix: show toast when browser zoom is not 100% (#5304)

* fix: show toast when browser zoom is not 100%

* update threshold for detecting zoom

* Make toast permanent for browser zoom

* check if browser zoomed on mount

* retrieve toast params from function getToastParams

* Revert "retrieve toast params from function getToastParams"

This reverts commit cfca580d74c0261c3706f577db5ba7f2213cdce8.

src/components/App.tsx

@@ -553,6 +553,12 @@ class App extends React.Component<AppProps, AppState> {
               <Toast
                 message={this.state.toastMessage}
                 clearToast={this.clearToast}
+                duration={
+                  this.state.toastMessage === t("alerts.browserZoom")
+                    ? Infinity
+                    : undefined
+                }
+                closable={this.state.toastMessage === t("alerts.browserZoom")}
               />
             )}
             <main>{this.renderCanvas()}</main>
@@ -766,6 +772,7 @@ class App extends React.Component<AppProps, AppState> {
           ? { ...scene.appState.activeTool, type: "selection" }
           : scene.appState.activeTool,
       isLoading: false,
+      toastMessage: this.state.toastMessage || null,
     };
     if (initialData?.scrollToContent) {
       scene.appState = {
@@ -904,6 +911,7 @@ class App extends React.Component<AppProps, AppState> {
     } else {
       this.updateDOMRect(this.initializeScene);
     }
+    this.checkIfBrowserZoomed();
   }
 
   public componentWillUnmount() {
@@ -916,8 +924,21 @@ class App extends React.Component<AppProps, AppState> {
     clearTimeout(touchTimeout);
     touchTimeout = 0;
   }
-
+  private checkIfBrowserZoomed = () => {
+    if (!this.device.isMobile) {
+      const scrollBarWidth = 10;
+      const widthRatio =
+        (window.outerWidth - scrollBarWidth) / window.innerWidth;
+      const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1;
+      if (isBrowserZoomed) {
+        this.setToastMessage(t("alerts.browserZoom"));
+      } else {
+        this.clearToast();
+      }
+    }
+  };
   private onResize = withBatchedUpdates(() => {
+    this.checkIfBrowserZoomed();
     this.scene
       .getElementsIncludingDeleted()
       .forEach((element) => invalidateShapeForElement(element));

src/locales/en.json

@@ -187,7 +187,8 @@
     "invalidSceneUrl": "Couldn't import scene from the supplied URL. It's either malformed, or doesn't contain valid Excalidraw JSON data.",
     "resetLibrary": "This will clear your library. Are you sure?",
     "removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
-    "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled."
+    "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.",
+    "browserZoom": "Your browser's zoom level is not set to 100% which may cause the board to display incorrectly"
   },
   "errors": {
     "unsupportedFileType": "Unsupported file type.",