diff --git a/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx b/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx index c789d17..f59b2f5 100644 --- a/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx +++ b/web/src/ui/timeline/menu/ConfirmWithMessageModal.tsx @@ -13,7 +13,7 @@ // // You should have received a copy of the GNU Affero General Public License // along with this program. If not, see . -import { use, useCallback, useState } from "react" +import React, { use, useCallback, useState } from "react" import { MemDBEvent } from "@/api/types" import useEvent from "@/util/useEvent.ts" import { ModalCloseContext } from "../../modal/Modal.tsx" @@ -33,14 +33,15 @@ const ConfirmWithMessageModal = ({ }: ConfirmWithMessageProps) => { const [reason, setReason] = useState("") const closeModal = use(ModalCloseContext) - const onConfirmWrapped = useEvent(() => { + const onConfirmWrapped = useEvent((evt: React.FormEvent) => { + evt.preventDefault() closeModal() onConfirm(reason) }) const onChangeReason = useCallback((evt: React.ChangeEvent) => { setReason(evt.target.value) }, []) - return <> + return

{title}

@@ -50,10 +51,10 @@ const ConfirmWithMessageModal = ({
- - + +
- +
} export default ConfirmWithMessageModal diff --git a/web/src/ui/timeline/menu/index.css b/web/src/ui/timeline/menu/index.css index 9029487..7e2b03d 100644 --- a/web/src/ui/timeline/menu/index.css +++ b/web/src/ui/timeline/menu/index.css @@ -45,7 +45,7 @@ div.event-context-menu-extra { } } -div.confirm-message-modal { +div.confirm-message-modal > form { width: min(40rem, 80vw); max-height: min(40rem, 80vh); display: flex;