fix: mobile modal UX improvements (delete confirm, browser-back, z-index) (#206)

- Replace browser confirm() with ConfirmModal for delete confirmation
- Add dedicated history entry for delete dialog so browser back dismisses it
- Track unsaved-changes warning source to restore correct context on cancel
- Add overlayClassName prop to ConfirmModal for nested z-index layering
- Add .nested-confirm CSS class for proper modal stacking
- Add i18n keys for delete confirmation dialog (EN + DE)

Closes #202
This commit is contained in:
Daniel Volz
2026-02-14 20:17:01 +01:00
committed by GitHub
parent 0ffab23b6d
commit 6ff0ad2745
5 changed files with 84 additions and 15 deletions
+3 -1
View File
@@ -13,6 +13,7 @@ export interface ConfirmModalProps {
onCancel: () => void;
isLoading?: boolean;
confirmVariant?: "primary" | "danger" | "success";
overlayClassName?: string;
}
export function ConfirmModal({
@@ -24,9 +25,10 @@ export function ConfirmModal({
onCancel,
isLoading = false,
confirmVariant = "primary",
overlayClassName,
}: ConfirmModalProps) {
return (
<div className="modal-overlay" onClick={onCancel}>
<div className={`modal-overlay${overlayClassName ? ` ${overlayClassName}` : ""}`} onClick={onCancel}>
<div className="modal-content" onClick={(e) => e.stopPropagation()} style={{ maxWidth: "450px" }}>
<button className="modal-close" onClick={onCancel}>
×