make some modals closable (#8869)

This PR update some modals to:
1. Use antd default props to achieve things like hiding the footer
buttons
2. Make them closable by clicking into the mask outside the modal.

There remained 14 modals that can not be closed by just clicking outside
them in the background. I looked through the list and for those modals I
agree that they should not be (accidentally) closable but rather the
user should be forced to make a decision by clicking one the
Ok/Cancel/etc buttons.

<img width="377" height="735" alt="Screenshot 2025-08-22 at 11 24 48"
src="https://github.com/user-attachments/assets/299e197c-115e-4f87-8f7b-4c582d998917"
/>


### Issues:
- fixes #5367

------
(Please delete unneeded items, merge only when none are left open)
- [ ] Added changelog entry (create a `$PR_NUMBER.md` file in
`unreleased_changes` or use `./tools/create-changelog-entry.py`)
- [ ] Added migration guide entry if applicable (edit the same file as
for the changelog)
- [ ] Updated [documentation](../blob/master/docs) if applicable
- [ ] Adapted [wk-libs python
client](https://github.com/scalableminds/webknossos-libs/tree/master/webknossos/webknossos/client)
if relevant API parts change
- [ ] Removed dev-only changes like prints and application.conf edits
- [ ] Considered [common edge
cases](../blob/master/.github/common_edge_cases.md)
- [ ] Needs datastore update after deployment

Author: hotzenklotz

frontend/javascripts/admin/dataset/dataset_add_view.tsx

@@ -273,17 +273,7 @@ const getPostUploadModal = (
       open
       closable
       maskClosable={false}
-      className="no-footer-modal"
-      cancelButtonProps={{
-        style: {
-          display: "none",
-        },
-      }}
-      okButtonProps={{
-        style: {
-          display: "none",
-        },
-      }}
+      footer={null}
       onCancel={() => setDatasetId("")}
       onOk={() => setDatasetId("")}
       width={580}
@@ -336,7 +326,7 @@ const getPostUploadModal = (
             </React.Fragment>
           )}
         </div>
-      </div>{" "}
+      </div>
     </Modal>
   );
 };

frontend/javascripts/admin/dataset/dataset_upload_view.tsx

@@ -492,17 +492,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
         open={isUploading}
         keyboard={false}
         maskClosable={false}
-        className="no-footer-modal"
-        okButtonProps={{
-          style: {
-            display: "none",
-          },
-        }}
-        cancelButtonProps={{
-          style: {
-            display: "none",
-          },
-        }}
+        footer={null}
         onCancel={this.cancelUpload}
       >
         <div

frontend/javascripts/admin/user/experience_modal_view.tsx

@@ -242,7 +242,6 @@ function ExperienceModalView({
       onOk={updateAllUsers}
       okText={"Save"}
       width={multipleUsers ? 800 : 600}
-      maskClosable={false}
     >
       <Table
         size="small"

frontend/javascripts/viewer/view/left-border-tabs/layer_settings_tab.tsx

@@ -488,8 +488,6 @@ class DatasetSettings extends React.PureComponent<DatasetSettingsProps, State> {
       title: `Deleting an annotation layer makes its content and history inaccessible. ${fallbackLayerNote}This cannot be undone. Are you sure you want to delete this layer?`,
       okText: `Yes, delete annotation layer “${readableAnnotationLayerName}”`,
       cancelText: "Cancel",
-      maskClosable: true,
-      closable: true,
       okButtonProps: {
         danger: true,
         block: true,

frontend/javascripts/viewer/view/left-border-tabs/modals/add_volume_layer_modal.tsx

@@ -227,14 +227,7 @@ export default function AddVolumeLayerModal({
   };
 
   return (
-    <Modal
-      title="Add Volume Annotation Layer"
-      footer={null}
-      width={500}
-      maskClosable={false}
-      onCancel={onCancel}
-      open
-    >
+    <Modal title="Add Volume Annotation Layer" footer={null} width={500} onCancel={onCancel} open>
       Layer Name:{" "}
       <InputComponent
         size="small"

frontend/stylesheets/_utils.less

@@ -49,7 +49,7 @@ td.nowrap * {
   flex-direction: row;
   justify-content: center;
 
-  & > * {
+  &>* {
     margin: 6px;
   }
 
@@ -71,6 +71,7 @@ td.nowrap * {
   display: table;
   content: "";
 }
+
 .clearfix::after {
   // sometimes required by .pull-right
   display: table;
@@ -86,12 +87,6 @@ td.nowrap * {
   margin-right: 5px;
 }
 
-.no-footer-modal {
-  .ant-modal-footer {
-    display: none;
-  }
-}
-
 .flex-container {
   justify-content: space-between;
   display: flex;
@@ -144,9 +139,11 @@ td.nowrap * {
 .grabbing {
   cursor: grabbing !important;
 }
+
 .grabbing * {
   cursor: grabbing !important;
 }
+
 .is-dragging {
   cursor: grabbing !important;
   user-select: none;
@@ -180,4 +177,4 @@ td.nowrap * {
     overflow-y: auto;
     flex-shrink: 1;
   }
-}
+}