From c1701ab4a40b8dae389bce42a69fc7bf5bce105b Mon Sep 17 00:00:00 2001
From: Nada <nada.ajinas@deriv.com>
Date: Wed, 12 Jun 2024 15:26:40 +0400
Subject: [PATCH] fix: console warning for opening create/edit ad

---
 .../Modals/AdRateSwitchModal/AdRateSwitchModal.scss         | 2 +-
 src/components/Wizard/Wizard.tsx                            | 2 +-
 src/pages/my-ads/components/AdFormInput/AdFormInput.tsx     | 2 +-
 src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx | 2 +-
 src/pages/my-ads/components/AdWizard/AdWizard.scss          | 4 ----
 .../BuyAdPaymentSelection/BuyAdPaymentSelection.scss        | 2 +-
 .../BuyPaymentMethodsList/BuyPaymentMethodsList.scss        | 2 +-
 src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss     | 6 ++++++
 src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx      | 3 ++-
 9 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss

diff --git a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss
index 731fc80d..70635d9c 100644
--- a/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss
+++ b/src/components/Modals/AdRateSwitchModal/AdRateSwitchModal.scss
@@ -4,7 +4,7 @@
     border-radius: 8px;
 
     @include mobile {
-        max-width: calc(100% - 3.2rem);
+        max-width: calc(100vw - 3.2rem);
     }
 
     &__body {
diff --git a/src/components/Wizard/Wizard.tsx b/src/components/Wizard/Wizard.tsx
index 6e2df80e..e1a2252c 100644
--- a/src/components/Wizard/Wizard.tsx
+++ b/src/components/Wizard/Wizard.tsx
@@ -94,7 +94,7 @@ const Wizard = <T extends ReactNode>({
 
     return (
         <div className={clsx('wizard', className)}>
-            {nav && isValidElement(nav) && cloneElement(nav, properties)}
+            {isValidElement(nav) && nav}
             {childrenWithProps}
         </div>
     );
diff --git a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
index 2fefda1c..8fe1d036 100644
--- a/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
+++ b/src/pages/my-ads/components/AdFormInput/AdFormInput.tsx
@@ -15,7 +15,7 @@ type TAdFormInputProps = ComponentProps<typeof Input> & {
 };
 
 const AdFormInput = ({
-    hint = <div />,
+    hint = <span />,
     isDisabled = false,
     label,
     name,
diff --git a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
index 59b74990..b1e9c55a 100644
--- a/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
+++ b/src/pages/my-ads/components/AdTypeSection/AdTypeSection.tsx
@@ -106,7 +106,7 @@ const AdTypeSection = ({ currency, localCurrency, onCancel, rateType, ...props }
                                 currency,
                             })
                         ) : (
-                            <div />
+                            <span />
                         )
                     }
                     isDisabled={isEdit}
diff --git a/src/pages/my-ads/components/AdWizard/AdWizard.scss b/src/pages/my-ads/components/AdWizard/AdWizard.scss
index a28a7530..047cb593 100644
--- a/src/pages/my-ads/components/AdWizard/AdWizard.scss
+++ b/src/pages/my-ads/components/AdWizard/AdWizard.scss
@@ -25,10 +25,6 @@
 
     .wizard__main-step {
         padding-top: 1rem;
-        @include desktop {
-            max-height: calc(100vh - 35rem);
-            overflow-y: auto;
-        }
     }
 
     .form-progress {
diff --git a/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss b/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss
index 33533c5c..4b90aa0c 100644
--- a/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss
+++ b/src/pages/my-ads/components/BuyAdPaymentSelection/BuyAdPaymentSelection.scss
@@ -2,7 +2,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 1.2rem 0;
+    padding: 0.3rem 1.2rem;
     border-radius: 4px;
     border: 1px solid #d6dadb;
     margin-bottom: 2rem;
diff --git a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss
index 6ecdb73e..615047e3 100644
--- a/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss
+++ b/src/pages/my-ads/components/BuyPaymentMethodsList/BuyPaymentMethodsList.scss
@@ -23,7 +23,7 @@
         }
         &__items {
             top: unset;
-            bottom: 7rem;
+            bottom: 5rem;
             max-height: 20rem;
         }
     }
diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss
new file mode 100644
index 00000000..1ca54e89
--- /dev/null
+++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.scss
@@ -0,0 +1,6 @@
+.create-edit-ad {
+    @include desktop {
+        max-height: calc(100vh - 19rem);
+        overflow-y: auto;
+    }
+}
diff --git a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
index b4582717..5fee505e 100644
--- a/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
+++ b/src/pages/my-ads/screens/CreateEditAd/CreateEditAd.tsx
@@ -8,6 +8,7 @@ import { api } from '@/hooks';
 import { useFloatingRate, useModalManager, useQueryString } from '@/hooks/custom-hooks';
 import { Loader } from '@deriv-com/ui';
 import { AdWizard } from '../../components';
+import './CreateEditAd.scss';
 
 const getSteps = (isEdit = false) => {
     const text = isEdit ? 'Edit' : 'Set';
@@ -221,7 +222,7 @@ const CreateEditAd = () => {
     return (
         <>
             <FormProvider {...methods}>
-                <form onSubmit={handleSubmit(onSubmit)}>
+                <form className='create-edit-ad' onSubmit={handleSubmit(onSubmit)}>
                     <AdWizard
                         countryList={countryList as TCountryListItem}
                         currency={activeAccount?.currency as TCurrency}