From dfa2aa40e8f2d2b1c2be8a781d3e56a8f6ac5aee Mon Sep 17 00:00:00 2001
From: kate-deriv <121025168+kate-deriv@users.noreply.github.com>
Date: Thu, 26 Dec 2024 14:52:37 +0300
Subject: [PATCH] DTRA-2471 / Kate / DND console error  (#17859)

* chore: remove overflow from parent containers

* refactor: left 1 parent with overflow y
---
 .../DraggableList/draggable-list.scss         |  1 -
 .../Containers/Trade/trade-types-content.tsx  |  8 ++++--
 .../AppV2/Containers/Trade/trade-types.tsx    | 25 +++++++++++--------
 .../src/AppV2/Containers/Trade/trade.scss     |  7 ++++++
 4 files changed, 28 insertions(+), 13 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..5e465cd5c3eb 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 = {
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..07952e8fd1a1 100644
--- a/packages/trader/src/AppV2/Containers/Trade/trade.scss
+++ b/packages/trader/src/AppV2/Containers/Trade/trade.scss
@@ -71,6 +71,10 @@
         }
     }
 }
+
+.quill-action-sheet--portal--wrapper:has(.trade-types-dialog--is_editing) {
+    overflow-y: hidden;
+}
 .trade-types-dialog {
     &__title {
         margin: var(--core-spacing-1200) var(--core-spacing-50);
@@ -78,4 +82,7 @@
     &__content {
         padding-top: var(--core-spacing-50);
     }
+    &--is_editing {
+        overflow: hidden;
+    }
 }