fix: show toast when browser zoom is not 100%

src/components/App.tsx

@@ -887,6 +887,19 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   private onResize = withBatchedUpdates(() => {
+    if (!this.deviceType.isMobile) {
+      const scrollBarWidth = 10;
+      const widthRatio =
+        (window.outerWidth - scrollBarWidth) / window.innerWidth;
+      const isBrowserZoomed =
+        // Device pixel ratio is 2 when zoom is 100%
+        window.devicePixelRatio !== 2 || widthRatio < 0.9 || widthRatio > 1;
+      if (isBrowserZoomed) {
+        this.setToastMessage(t("alerts.browserZoom"));
+      } else {
+        this.clearToast();
+      }
+    }
     this.scene
       .getElementsIncludingDeleted()
       .forEach((element) => invalidateShapeForElement(element));

src/locales/en.json

@@ -181,7 +181,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.",