u

2026-10-05 14:54:43 +02:00
parent 358d34ecab
commit 26bee398a6
26 changed files with 209 additions and 75 deletions
--- a/src/components/AppDialog.jsx
+++ b/src/components/AppDialog.jsx
@@ -0,0 +1,107 @@
+import { Component } from 'react';
+import Dialog from '@mui/material/Dialog';
+import { DIALOG_FOG } from '../colors';
+
+/**
+ * Shared dialog shell — drop-in replacement for MUI `Dialog`.
+ *
+ * Guarantees across the whole app:
+ * - instant open/close (no Fade/scale animation): `transitionDuration={0}`
+ * - darker, bluish fog: backdrop `backgroundColor` = `DIALOG_FOG`
+ * - scrollbar-gutter matches the fog: toggles `df-dialog-open` on
+ *   `<html>` while any `AppDialog` is open (see `src/index.css`).
+ *
+ * Class component on purpose (PureComponent-free: open state is driven
+ * by props, state lives in the wrapped content).
+ *
+ * Usage:
+ *   import AppDialog from '../AppDialog';
+ *   <AppDialog open={open} onClose={onClose} maxWidth="xs" fullWidth>
+ */
+class AppDialog extends Component {
+  static openCount = 0;
+
+  static updateFogClass() {
+    if (typeof document === 'undefined') return;
+    const html = document.documentElement;
+    if (!html) return;
+    if (AppDialog.openCount > 0) {
+      html.classList.add('df-dialog-open');
+    } else {
+      html.classList.remove('df-dialog-open');
+    }
+  }
+
+  static enter() {
+    AppDialog.openCount += 1;
+    AppDialog.updateFogClass();
+  }
+
+  static exit() {
+    AppDialog.openCount = Math.max(0, AppDialog.openCount - 1);
+    AppDialog.updateFogClass();
+  }
+
+  componentDidMount() {
+    if (this.props.open) AppDialog.enter();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.open && !prevProps.open) AppDialog.enter();
+    else if (!this.props.open && prevProps.open) AppDialog.exit();
+  }
+
+  componentWillUnmount() {
+    if (this.props.open) AppDialog.exit();
+  }
+
+  render() {
+    const {
+      transitionDuration: _transitionDuration,
+      TransitionProps: _transitionProps,
+      TransitionComponent: _transitionComponent,
+      slotProps: userSlotProps,
+      slots: userSlots,
+      ...rest
+    } = this.props;
+    void _transitionDuration;
+    void _transitionProps;
+    void _transitionComponent;
+
+    const userBackdrop = userSlotProps?.backdrop ?? {};
+    const { sx: userBackdropSx, ...restBackdrop } = userBackdrop;
+    const userTransition = userSlotProps?.transition ?? {};
+    const { transition: _userTransitionSlot, ...restSlots } = userSlots ?? {};
+    void _userTransitionSlot;
+
+    const slotProps = {
+      ...userSlotProps,
+      backdrop: {
+        ...restBackdrop,
+        sx: [
+          { backgroundColor: DIALOG_FOG },
+          ...(Array.isArray(userBackdropSx)
+            ? userBackdropSx
+            : userBackdropSx
+              ? [userBackdropSx]
+              : []),
+        ],
+      },
+      transition: {
+        ...userTransition,
+        timeout: 0,
+      },
+    };
+
+    return (
+      <Dialog
+        {...rest}
+        slots={restSlots}
+        slotProps={slotProps}
+        transitionDuration={0}
+      />
+    );
+  }
+}
+
+export default AppDialog;
--- a/src/components/CompanySettingsDialog.jsx
+++ b/src/components/CompanySettingsDialog.jsx
@@ -2,7 +2,7 @@ import { Component } from 'react';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -180,7 +180,7 @@ export default class CompanySettingsDialog extends Component {
      parsedReducedtaxrate != null;

    return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
        <DialogTitle>Unternehmen bearbeiten</DialogTitle>
        <Box component="form" onSubmit={this.handleSubmit} noValidate>
          <DialogContent>
@@ -334,7 +334,7 @@ export default class CompanySettingsDialog extends Component {
            </Button>
          </DialogActions>
        </Box>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/CompanySetupDialog.jsx
+++ b/src/components/CompanySetupDialog.jsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Divider from '@mui/material/Divider';
@@ -268,7 +268,7 @@ class CompanySetupDialog extends Component {
      parsedReducedtaxrate != null;

    return (
-      <Dialog
+      <AppDialog
        open
        onClose={this.handleClose}
        maxWidth={hasCompanies ? 'sm' : 'md'}
@@ -551,7 +551,7 @@ class CompanySetupDialog extends Component {
            </Stack>
          )}
        </DialogContent>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/NameDialog.jsx
+++ b/src/components/NameDialog.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from './AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -65,7 +65,7 @@ class NameDialog extends Component {
    const canSave = name.trim() !== '';

    return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
        <DialogTitle>{title}</DialogTitle>
        <Box component="form" onSubmit={this.handleSubmit} noValidate>
          <DialogContent>
@@ -97,7 +97,7 @@ class NameDialog extends Component {
            </Button>
          </DialogActions>
        </Box>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticleImageSearchDialog.jsx
+++ b/src/components/article/ArticleImageSearchDialog.jsx
@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -317,7 +317,7 @@ export default class ArticleImageSearchDialog extends PureComponent {
    const isSerperKeyError = error && error.toLowerCase().includes('keys.serper');

    return (
-      <Dialog
+      <AppDialog
        open={open}
        onClose={processingId ? undefined : onClose}
        maxWidth="md"
@@ -719,7 +719,7 @@ export default class ArticleImageSearchDialog extends PureComponent {
            Schließen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticleNameDialog.jsx
+++ b/src/components/article/ArticleNameDialog.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -107,7 +107,7 @@ class ArticleNameDialog extends Component {
    const canSubmitBulk = bulkNames.length > 0;

    return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
        <DialogTitle>Neuer Artikel</DialogTitle>

        {!isBulk && (
@@ -202,7 +202,7 @@ class ArticleNameDialog extends Component {
            </DialogActions>
          </Box>
        )}
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticlePhotosDialog.jsx
+++ b/src/components/article/ArticlePhotosDialog.jsx
@@ -2,7 +2,7 @@ import { Component, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -271,7 +271,7 @@ class ArticlePhotosDialog extends Component {

    return (
      <>
-        <Dialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
+        <AppDialog open={open} onClose={this.handleClose} maxWidth="md" fullWidth>
          <DialogTitle>Bilder</DialogTitle>
          <DialogContent dividers>
            {photos.length === 0 ? (
@@ -324,7 +324,7 @@ class ArticlePhotosDialog extends Component {
              Schließen
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>
        <input
          ref={this.fileInputRef}
          type="file"
--- a/src/components/article/ArticlePriceTiersDialog.jsx
+++ b/src/components/article/ArticlePriceTiersDialog.jsx
@@ -3,7 +3,7 @@ import AddIcon from '@mui/icons-material/Add';
 import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -90,7 +90,7 @@ class ArticlePriceTiersDialog extends Component {
    const canApply = tiersValid(tiers);

    return (
-      <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
        <DialogTitle>Staffelpreise</DialogTitle>
        <DialogContent dividers>
          {tiers.length === 0 ? (
@@ -174,7 +174,7 @@ class ArticlePriceTiersDialog extends Component {
            Übernehmen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticleSearch.jsx
+++ b/src/components/article/ArticleSearch.jsx
@@ -2,7 +2,7 @@ import { PureComponent, createRef } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -597,7 +597,7 @@ export default class ArticleSearch extends PureComponent {
    const isDialogOpen = isControlled ? Boolean(controlledOpen) : internalOpen;

    return (
-      <Dialog
+      <AppDialog
        open={isDialogOpen}
        onClose={this.handleCloseDialog}
        maxWidth="md"
@@ -660,7 +660,7 @@ export default class ArticleSearch extends PureComponent {
            Schließen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }

--- a/src/components/article/ArticleStockAdjustDialog.jsx
+++ b/src/components/article/ArticleStockAdjustDialog.jsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -307,7 +307,7 @@ export default class ArticleStockAdjustDialog extends PureComponent {
      '';

    return (
-      <Dialog
+      <AppDialog
        open={Boolean(open)}
        onClose={submitting ? undefined : onClose}
        maxWidth="sm"
@@ -624,7 +624,7 @@ export default class ArticleStockAdjustDialog extends PureComponent {
                : 'Speichern'}
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticleSupplierDialog.jsx
+++ b/src/components/article/ArticleSupplierDialog.jsx
@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -111,7 +111,7 @@ export default class ArticleSupplierDialog extends PureComponent {
    const puValid = parsedPu != null && parsedPu > 0;

    return (
-      <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
        <form onSubmit={this.handleSubmit}>
          <DialogTitle sx={{ fontWeight: 600 }}>
            {isEdit ? 'Lieferant bearbeiten' : 'Lieferant zuweisen'}
@@ -226,7 +226,7 @@ export default class ArticleSupplierDialog extends PureComponent {
            </Button>
          </DialogActions>
        </form>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/ArticleUnitEditorDialog.jsx
+++ b/src/components/article/ArticleUnitEditorDialog.jsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -165,7 +165,7 @@ export default class ArticleUnitEditorDialog extends Component {
    const loading = unitsLoading && units.length === 0;

    return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="md" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="md" fullWidth>
        <DialogTitle>Einheiten</DialogTitle>
        <DialogContent dividers>
          <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 1 }}>
@@ -299,7 +299,7 @@ export default class ArticleUnitEditorDialog extends Component {
            Schließen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/CategoryPickerDialog.jsx
+++ b/src/components/article/CategoryPickerDialog.jsx
@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
@@ -145,7 +145,7 @@ export default class CategoryPickerDialog extends PureComponent {
        : EMPTY_ARRAY;

    return (
-      <Dialog
+      <AppDialog
        open={open}
        onClose={onClose}
        maxWidth="sm"
@@ -273,7 +273,7 @@ export default class CategoryPickerDialog extends PureComponent {
            </Button>
          </Box>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/article/boxes/ArticleViewLists.jsx
+++ b/src/components/article/boxes/ArticleViewLists.jsx
@@ -6,7 +6,7 @@ import Button from '@mui/material/Button';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -1753,7 +1753,7 @@ export default class ArticleViewLists extends PureComponent {
        </Box>

        {/* Remove Child Confirmation Dialog */}
-        <Dialog
+        <AppDialog
          open={Boolean(removeTargetChild)}
          onClose={this.handleCloseRemoveDialog}
          maxWidth="xs"
@@ -1793,10 +1793,10 @@ export default class ArticleViewLists extends PureComponent {
              Vollständig löschen
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>

        {/* Clear Stückliste / Optionen Confirmation Dialog */}
-        <Dialog
+        <AppDialog
          open={Boolean(confirmClearType)}
          onClose={() => this.setState({ confirmClearType: null })}
          maxWidth="xs"
@@ -1835,7 +1835,7 @@ export default class ArticleViewLists extends PureComponent {
              Auflösen
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>
      </PanelTile>
    );
  }
--- a/src/components/brand/BrandImageSearchDialog.jsx
+++ b/src/components/brand/BrandImageSearchDialog.jsx
@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -238,7 +238,7 @@ export default class BrandImageSearchDialog extends PureComponent {
      error && error.toLowerCase().includes('keys.serper');

    return (
-      <Dialog
+      <AppDialog
        open={open}
        onClose={processingId ? undefined : onClose}
        maxWidth="md"
@@ -624,7 +624,7 @@ export default class BrandImageSearchDialog extends PureComponent {
            Schließen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/category/CategoryNameDialog.jsx
+++ b/src/components/category/CategoryNameDialog.jsx
@@ -1,7 +1,7 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -119,7 +119,7 @@ class CategoryNameDialog extends Component {
    const canSubmitBulk = bulkNames.length > 0;

    return (
-      <Dialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
+      <AppDialog open={open} onClose={this.handleClose} maxWidth="xs" fullWidth>
        <DialogTitle>{TITLES[mode]}</DialogTitle>

        {!isBulk && (
@@ -216,7 +216,7 @@ class CategoryNameDialog extends Component {
            </DialogActions>
          </Box>
        )}
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/category/CategoryTree.jsx
+++ b/src/components/category/CategoryTree.jsx
@@ -10,7 +10,7 @@ import InputAdornment from '@mui/material/InputAdornment';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import Tooltip from '@mui/material/Tooltip';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
@@ -663,7 +663,7 @@ export default class CategoryTree extends PureComponent {
        </Box>

        {/* Add Dialog */}
-        <Dialog
+        <AppDialog
          open={addDialogOpen}
          onClose={() => !isSubmitting && this.setState({ addDialogOpen: false })}
          maxWidth="xs"
@@ -710,10 +710,10 @@ export default class CategoryTree extends PureComponent {
              Anlegen
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>

        {/* Rename Dialog */}
-        <Dialog
+        <AppDialog
          open={renameDialogOpen}
          onClose={() => !isSubmitting && this.setState({ renameDialogOpen: false })}
          maxWidth="xs"
@@ -753,10 +753,10 @@ export default class CategoryTree extends PureComponent {
              Speichern
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>

        {/* Delete Confirmation Dialog */}
-        <Dialog
+        <AppDialog
          open={deleteDialogOpen}
          onClose={() => !isSubmitting && this.setState({ deleteDialogOpen: false })}
          maxWidth="xs"
@@ -788,7 +788,7 @@ export default class CategoryTree extends PureComponent {
              Löschen
            </Button>
          </DialogActions>
-        </Dialog>
+        </AppDialog>
      </Box>
    );
  }
--- a/src/components/chat/NewConversationDialog.jsx
+++ b/src/components/chat/NewConversationDialog.jsx
@@ -1,5 +1,5 @@
 import { PureComponent } from 'react';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import DialogContent from '@mui/material/DialogContent';
 import DialogActions from '@mui/material/DialogActions';
@@ -67,7 +67,7 @@ export default class NewConversationDialog extends PureComponent {
    const { provider, model, customModel, isCustom, loading, error } = this.state;

    return (
-      <Dialog
+      <AppDialog
        open={open}
        onClose={loading ? undefined : onClose}
        maxWidth="xs"
@@ -165,7 +165,7 @@ export default class NewConversationDialog extends PureComponent {
            </Button>
          </DialogActions>
        </form>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/manifest/ArticleSearchDialog.jsx
+++ b/src/components/manifest/ArticleSearchDialog.jsx
@@ -1,7 +1,7 @@
 import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -52,7 +52,7 @@ export default class ArticleSearchDialog extends PureComponent {
    const rawSku = line?.sku != null ? String(line.sku).trim() : '';

    return (
-      <Dialog
+      <AppDialog
        open={Boolean(open)}
        onClose={assigningSku ? undefined : onClose}
        maxWidth="md"
@@ -146,7 +146,7 @@ export default class ArticleSearchDialog extends PureComponent {
            Abbrechen
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/manifest/BookDeliveryDialog.jsx
+++ b/src/components/manifest/BookDeliveryDialog.jsx
@@ -2,7 +2,7 @@ import { PureComponent } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -507,7 +507,7 @@ export default class BookDeliveryDialog extends PureComponent {
    const isWarehouseMissing = !selectedWarehouseId;

    return (
-      <Dialog
+      <AppDialog
        open={Boolean(open)}
        onClose={isBooking ? undefined : onClose}
        maxWidth="md"
@@ -692,7 +692,7 @@ export default class BookDeliveryDialog extends PureComponent {
            </Button>
          )}
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/manifest/ManifestPdfDialog.jsx
+++ b/src/components/manifest/ManifestPdfDialog.jsx
@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
 import Chip from '@mui/material/Chip';
 import CircularProgress from '@mui/material/CircularProgress';
 import Collapse from '@mui/material/Collapse';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -113,7 +113,7 @@ export default function ManifestPdfDialog({
  const handleAbortOrClose = streaming ? (onAbort || onClose) : onClose;

  return (
-    <Dialog
+    <AppDialog
      open={open}
      onClose={handleAbortOrClose}
      maxWidth="sm"
@@ -244,6 +244,6 @@ export default function ManifestPdfDialog({
        )}
      </DialogActions>

-    </Dialog>
+    </AppDialog>
  );
 }
--- a/src/components/settings/PrinterSettingsPanel.jsx
+++ b/src/components/settings/PrinterSettingsPanel.jsx
@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -110,7 +110,7 @@ class PrinterFormDialog extends Component {
    const { open, onClose, title } = this.props;
    const { form, busy, error } = this.state;
    return (
-      <Dialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
+      <AppDialog open={open} onClose={busy ? undefined : onClose} maxWidth="sm" fullWidth>
        <DialogTitle>{title}</DialogTitle>
        <DialogContent>
          <Stack spacing={2} sx={{ mt: 1 }}>
@@ -180,7 +180,7 @@ class PrinterFormDialog extends Component {
            {busy ? <CircularProgress size={18} /> : 'Speichern'}
          </Button>
        </DialogActions>
-      </Dialog>
+      </AppDialog>
    );
  }
 }
--- a/src/components/settings/SettingsDialog.jsx
+++ b/src/components/settings/SettingsDialog.jsx
@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
+import AppDialog from '../AppDialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import Tab from '@mui/material/Tab';
@@ -47,7 +47,7 @@ export default class SettingsDialog extends Component {
    const { tab } = this.state;

    return (
-      <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <AppDialog open={open} onClose={onClose} maxWidth="md" fullWidth>
        <DialogTitle>Einstellungen</DialogTitle>
        <Tabs
          value={tab}
@@ -74,7 +74,7 @@ export default class SettingsDialog extends Component {
            ))}
          </Box>
        </DialogContent>
-      </Dialog>
+      </AppDialog>
    );
  }
 }