From d036a9935807cc6aa3a5ee3a3bc4fc929f466785 Mon Sep 17 00:00:00 2001
From: Romain Lenzotti <rom.lenzotti@gmail.com>
Date: Mon, 29 Nov 2021 12:18:56 +0100
Subject: [PATCH] fix(react-formio): Improve Remove modal styling

---
 .../src/components/modal/removeModal.component.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react-formio/src/components/modal/removeModal.component.tsx b/packages/react-formio/src/components/modal/removeModal.component.tsx
index cc1635c7..393a7455 100644
--- a/packages/react-formio/src/components/modal/removeModal.component.tsx
+++ b/packages/react-formio/src/components/modal/removeModal.component.tsx
@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
-import React, { useState } from "react";
+import React, { PropsWithChildren, useState } from "react";
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";
 import { Modal, ModalProps } from "./modal.component";
@@ -42,22 +42,29 @@ export interface RemoveModalProps extends ModalProps {
   valueToCompare: string;
   itemType?: string;
   i18n?: (f: string) => string;
+  maxWidth?: string;
 }
 
-export function RemoveModal(props: RemoveModalProps) {
+export function RemoveModal({
+  maxWidth = "300px",
+  children,
+  ...props
+}: PropsWithChildren<RemoveModalProps>) {
   const { i18n = noop } = props;
   const [value, setValue] = useState();
 
   return (
     <Modal
       {...props}
-      style={{ maxWidth: "300px" }}
+      className={classnames(props.className, "formio-dialog-theme-remove")}
+      style={{ maxWidth }}
       title={`Drop ${props.itemType?.toLowerCase()}`}
       value={value}
       footer={RemoveModalFooter}
     >
       <div className={"px-4 pt-3 pb-5"}>
         <div className={"pb-1"}>
+          {children}
           {i18n("To drop")} <strong>{props.valueToCompare}</strong>,&nbsp;
           {i18n("type the")}&nbsp;
           <strong>&quot;{props.itemType?.toLowerCase()}&quot;</strong>&nbsp;