Fixed report issues.

components/pages/reports/funnel/FunnelParameters.js

@@ -96,8 +96,10 @@ function AddUrlButton({ onAdd }) {
         </Icon>
       </TooltipPopup>
       <Popup position="bottom" alignment="start">
-        {close => {
-          return <UrlAddForm onSave={onAdd} onClose={close} />;
+        {(close, element) => {
+          const { right, bottom } = element.getBoundingClientRect();
+
+          return <UrlAddForm onSave={onAdd} onClose={close} style={{ left: right, top: bottom }} />;
         }}
       </Popup>
     </PopupTrigger>

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,
   );
 }
 

components/pages/reports/funnel/UrlAddForm.module.css

@@ -1,8 +1,14 @@
 .form {
+  position: absolute;
   background: var(--base50);
+  width: 300px;
   padding: 30px;
   margin-top: 10px;
   border: 1px solid var(--base400);
   border-radius: var(--border-radius);
   box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1);
 }
+
+.input {
+  width: 100%;
+}