Fixed report issues.

components/pages/reports/funnel/UrlAddForm.js

@@ -1,13 +1,15 @@
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useMessages } from 'hooks';
-import { Button, Form, FormButtons, FormRow, TextField } from 'react-basics';
+import { Button, Form, FormRow, TextField, Flexbox } from 'react-basics';
 import styles from './UrlAddForm.module.css';
 
-export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
+export function UrlAddForm({ defaultValue = '', style, onSave, onClose }) {
   const [url, setUrl] = useState(defaultValue);
   const { formatMessage, labels } = useMessages();
 
-  const handleSave = () => {
+  const handleSave = e => {
+    e?.stopPropagation?.();
     onSave?.(url);
     setUrl('');
     onClose();
@@ -17,23 +19,29 @@ export function UrlAddForm({ defaultValue = '', onSave, onClose }) {
     setUrl(e.target.value);
   };
 
-  return (
-    <Form className={styles.form} onSubmit={handleSave}>
+  const handleClick = e => {
+    e.stopPropagation();
+  };
+
+  return createPortal(
+    <Form className={styles.form} onSubmit={handleSave} style={style} onClick={handleClick}>
       <FormRow label={formatMessage(labels.url)}>
-        <TextField
-          name="url"
-          value={url}
-          onChange={handleChange}
-          autoFocus={true}
-          autoComplete="off"
-        />
+        <Flexbox gap={10}>
+          <TextField
+            className={styles.input}
+            name="url"
+            value={url}
+            onChange={handleChange}
+            autoFocus={true}
+            autoComplete="off"
+          />
+          <Button variant="primary" onClick={handleSave}>
+            {formatMessage(labels.add)}
+          </Button>
+        </Flexbox>
       </FormRow>
-      <FormButtons align="center" flex>
-        <Button variant="primary" onClick={handleSave}>
-          {formatMessage(labels.save)}
-        </Button>
-      </FormButtons>
-    </Form>
+    </Form>,
+    document.body,
   );
 }