[BOT] maryia/ BOT-1623/feat: Bring user to top of page when switching…

… between strategies on QS modal (deriv-com#15531)

* feat: Bring user to top of page when switching between strategies on QS modal

* refactor: make smaller letter for desktop version

packages/bot-web-ui/src/pages/bot-builder/quick-strategy/form-wrappers/desktop-form-wrapper.tsx

@@ -26,6 +26,7 @@ type TDesktopFormWrapper = {
 
 const FormWrapper: React.FC<TDesktopFormWrapper> = observer(({ children, onClickClose, active_tab_ref }) => {
     const [activeTab, setActiveTab] = React.useState('TRADE_PARAMETERS');
+    const scroll_ref = React.useRef<HTMLDivElement & SVGSVGElement>(null);
     const { submitForm, isValid, setFieldValue, validateForm, values } = useFormikContext<TFormValues>();
     const { quick_strategy } = useDBotStore();
     const { selected_strategy, setSelectedStrategy, onSubmit, is_stop_bot_dialog_open } = quick_strategy;
@@ -36,9 +37,17 @@ const FormWrapper: React.FC<TDesktopFormWrapper> = observer(({ children, onClick
         validateForm();
     }, [selected_strategy, validateForm]);
 
+    const scrollToTop = () => {
+        // Gets the reference of the element and scrolls it to the top
+        if (scroll_ref.current) {
+            scroll_ref.current.scrollTop = 0;
+        }
+    };
+
     const onChangeStrategy = (strategy: string) => {
         setSelectedStrategy(strategy);
         setActiveTab('TRADE_PARAMETERS');
+        scrollToTop();
     };
 
     const handleTabChange = (tab: string) => {
@@ -118,6 +127,7 @@ const FormWrapper: React.FC<TDesktopFormWrapper> = observer(({ children, onClick
                                 'qs__form__container--no-footer': activeTab !== 'TRADE_PARAMETERS',
                             })}
                             autohide={false}
+                            refSetter={scroll_ref}
                         >
                             <div ref={active_tab_ref}>
                                 <FormTabs

packages/bot-web-ui/src/pages/dashboard/load-bot-preview/save-modal.tsx

@@ -211,7 +211,7 @@ const SaveModal = observer(() => {
         </MobileFullPageModal>
     ) : (
         <Modal
-            title={localize('Save Strategy')}
+            title={localize('Save strategy')}
             className='modal--save'
             width='32.8rem'
             height='50rem'