DTRA-2471 / Kate / DND console error (#17859)

* chore: remove overflow from parent containers * refactor: left 1 parent with overflow y
deriv-com · Dec 26, 2024 · dfa2aa4 · dfa2aa4
1 parent 679d73a
commit dfa2aa4
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -71,11 +71,18 @@
         }
     }
 }
+
+.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);
     }
     &__content {
         padding-top: var(--core-spacing-50);
     }
+    &--is_editing {
+        overflow: hidden;
+    }
 }