From 883150cb5e8e980b7501982ab16bd5187d1bdfc5 Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Thu, 19 Dec 2024 10:29:18 +0300
Subject: [PATCH 1/2] chore: remove overflow from parent containers

---
 .../DraggableList/draggable-list.scss         |  1 -
 .../Containers/Trade/trade-types-content.tsx  | 14 ++++++++---
 .../AppV2/Containers/Trade/trade-types.tsx    | 25 +++++++++++--------
 .../src/AppV2/Containers/Trade/trade.scss     |  8 +++++-
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/trader/src/AppV2/Components/DraggableList/draggable-list.scss b/packages/trader/src/AppV2/Components/DraggableList/draggable-list.scss
index df2347d362fe..8c11ccd07ec0 100644
--- a/packages/trader/src/AppV2/Components/DraggableList/draggable-list.scss
+++ b/packages/trader/src/AppV2/Components/DraggableList/draggable-list.scss
@@ -54,7 +54,6 @@
             display: flex;
             flex-direction: column;
             padding: var(--core-spacing-500) 0;
-            overflow: auto;
         }
 
         &__item {
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx b/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
index eefd538c35f8..c30a61475692 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
@@ -1,8 +1,12 @@
 import React from 'react';
-import { Button, Text, ActionSheet } from '@deriv-com/quill-ui';
+import clsx from 'clsx';
+
+import { Localize } from '@deriv/translations';
+import { ActionSheet, Button, Text } from '@deriv-com/quill-ui';
+
 import { DraggableList } from 'AppV2/Components/DraggableList';
 import { TradeTypeList } from 'AppV2/Components/TradeTypeList';
-import { Localize } from '@deriv/translations';
+
 import { TItem, TResultItem } from './trade-types';
 
 type TTradeTypesContent = {
@@ -52,7 +56,11 @@ const TradeTypesContent = ({
                 </Button>
             </div>
         </div>
-        <ActionSheet.Content className='trade-types-dialog__content'>
+        <ActionSheet.Content
+            className={clsx('trade-types-dialog__content', {
+                'trade-types-dialog__content--is_editing': is_editing,
+            })}
+        >
             {is_editing ? (
                 <DraggableList
                     categories={pinned_trade_types}
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx b/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
index 5408f66b190d..8d19daa4bdb1 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
+++ b/packages/trader/src/AppV2/Containers/Trade/trade-types.tsx
@@ -1,19 +1,22 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+
 import { LabelPairedPresentationScreenSmRegularIcon } from '@deriv/quill-icons';
-import { useTraderStore } from 'Stores/useTraderStores';
-import { Button, Chip, Text, ActionSheet } from '@deriv-com/quill-ui';
-import { DraggableList } from 'AppV2/Components/DraggableList';
-import { TradeTypeList } from 'AppV2/Components/TradeTypeList';
-import { getTradeTypesList, sortCategoriesInTradeTypeOrder } from 'AppV2/Utils/trade-types-utils';
-import { checkContractTypePrefix } from 'AppV2/Utils/contract-type';
 import { Localize, localize } from '@deriv/translations';
 import { safeParse } from '@deriv/utils';
-import TradeTypesSelectionGuide from 'AppV2/Components/OnboardingGuide/TradeTypesSelectionGuide';
+import { ActionSheet, Button, Chip, Text } from '@deriv-com/quill-ui';
+
 import Carousel from 'AppV2/Components/Carousel';
 import CarouselHeader from 'AppV2/Components/Carousel/carousel-header';
-import TradeTypesContent from './trade-types-content';
-import Guide from '../../Components/Guide';
+import TradeTypesSelectionGuide from 'AppV2/Components/OnboardingGuide/TradeTypesSelectionGuide';
+import { checkContractTypePrefix } from 'AppV2/Utils/contract-type';
+import { getTradeTypesList, sortCategoriesInTradeTypeOrder } from 'AppV2/Utils/trade-types-utils';
+import { useTraderStore } from 'Stores/useTraderStores';
+
 import { sendOpenGuideToAnalytics } from '../../../Analytics';
+import Guide from '../../Components/Guide';
+
+import TradeTypesContent from './trade-types-content';
 
 type TTradeTypesProps = {
     onTradeTypeSelect: (
@@ -278,7 +281,9 @@ const TradeTypes = ({ contract_type, onTradeTypeSelect, trade_types, is_dark_mod
                 </Button>
             )}
             <ActionSheet.Root
-                className='trade-types-dialog'
+                className={clsx('trade-types-dialog', {
+                    'trade-types-dialog--is_editing': is_editing,
+                })}
                 isOpen={is_open}
                 expandable={false}
                 onClose={handleCloseTradeTypes}
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.scss b/packages/trader/src/AppV2/Containers/Trade/trade.scss
index 9e3e765deec4..c6d7a5c24a74 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade.scss
+++ b/packages/trader/src/AppV2/Containers/Trade/trade.scss
@@ -73,9 +73,15 @@
 }
 .trade-types-dialog {
     &__title {
-        margin: var(--core-spacing-1200) var(--core-spacing-50);
+        margin: var(--core-spacing-1000) var(--core-spacing-50);
     }
     &__content {
         padding-top: var(--core-spacing-50);
+        &--is_editing {
+            overflow: hidden;
+        }
+    }
+    &--is_editing {
+        overflow: hidden;
     }
 }

From fd862f62557cbb9fe7bef39860882e6b2e98dddf Mon Sep 17 00:00:00 2001
From: kate-deriv <kate@regentmarkets.com>
Date: Thu, 19 Dec 2024 10:57:13 +0300
Subject: [PATCH 2/2] refactor: left 1 parent with overflow y

---
 .../src/AppV2/Containers/Trade/trade-types-content.tsx   | 6 +-----
 packages/trader/src/AppV2/Containers/Trade/trade.scss    | 9 +++++----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx b/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
index c30a61475692..5e465cd5c3eb 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
+++ b/packages/trader/src/AppV2/Containers/Trade/trade-types-content.tsx
@@ -56,11 +56,7 @@ const TradeTypesContent = ({
                 </Button>
             </div>
         </div>
-        <ActionSheet.Content
-            className={clsx('trade-types-dialog__content', {
-                'trade-types-dialog__content--is_editing': is_editing,
-            })}
-        >
+        <ActionSheet.Content className='trade-types-dialog__content'>
             {is_editing ? (
                 <DraggableList
                     categories={pinned_trade_types}
diff --git a/packages/trader/src/AppV2/Containers/Trade/trade.scss b/packages/trader/src/AppV2/Containers/Trade/trade.scss
index c6d7a5c24a74..07952e8fd1a1 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade.scss
+++ b/packages/trader/src/AppV2/Containers/Trade/trade.scss
@@ -71,15 +71,16 @@
         }
     }
 }
+
+.quill-action-sheet--portal--wrapper:has(.trade-types-dialog--is_editing) {
+    overflow-y: hidden;
+}
 .trade-types-dialog {
     &__title {
-        margin: var(--core-spacing-1000) var(--core-spacing-50);
+        margin: var(--core-spacing-1200) var(--core-spacing-50);
     }
     &__content {
         padding-top: var(--core-spacing-50);
-        &--is_editing {
-            overflow: hidden;
-        }
     }
     &--is_editing {
         overflow: hidden;