Make antd messages click-through (#7239)

* make antd messages click-through

* changelog

* add some margin above messages

* pretty

CHANGELOG.unreleased.md

@@ -15,6 +15,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added configuration to require users' emails to be verified, added flow to verify emails via link. [#7161](https://github.com/scalableminds/webknossos/pull/7161)
 
 ### Changed
+- Small messages during annotating (e.g. “finished undo”, “applying mapping…”) are now click-through so they do not block users from selecting tools. [7239](https://github.com/scalableminds/webknossos/pull/7239)
 
 ### Fixed
 

frontend/javascripts/main.tsx

@@ -4,6 +4,7 @@ import ReactDOM from "react-dom";
 import { document } from "libs/window";
 import rootSaga from "oxalis/model/sagas/root_saga";
 import UnthrottledStore, { startSagas } from "oxalis/store";
+import { message } from "antd";
 
 import { getActiveUser, checkAnyOrganizationExists, getOrganization } from "admin/admin_rest_api";
 import { googleAnalyticsLogClicks } from "oxalis/model/helpers/analytics";
@@ -88,6 +89,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   ErrorHandling.initialize({
     throwAssertions: false,
   });
+  message.config({ top: 30 });
   document.addEventListener("click", googleAnalyticsLogClicks);
   checkBrowserFeatures();
   await Promise.all([loadFeatureToggles(), loadActiveUser(), loadHasOrganizations()]);

frontend/stylesheets/main.less

@@ -667,3 +667,7 @@ i.without-icon-margin,
     }
   }
 }
+
+.ant-message, .ant-message * {
+  pointer-events: none;
+}