fix: scroll tab change issue in mobile

deriv-com · Sep 2, 2024 · e3f035c · e3f035c
1 parent 04903ed
commit e3f035c
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/javascript/app/pages/trade/markets/markets-dropdown.jsx b/src/javascript/app/pages/trade/markets/markets-dropdown.jsx
@@ -146,7 +146,7 @@ export const MarketsDropdown = () => {
             let closestOffset = Infinity;
 
             marketDivs.forEach((div) => {
-                const paddingOffset = 120;
+                const paddingOffset = window.innerWidth > 768 ? 120 : 220;
                 const offsetTop = div.offsetTop - container.scrollTop - paddingOffset;
 
                 if (offsetTop <= 0 && Math.abs(offsetTop) < Math.abs(closestOffset)) {
@@ -291,22 +291,22 @@ export const MarketsDropdown = () => {
 
                                     return (
                                         <React.Fragment key={sub_market_key}>
-                                            <DropdownTitle label={name} />
+                                            <DropdownTitle label={name} data-id={market_key} />
                                             {Object.keys(symbols).map((symbol_key) => {
                                                 const symbol = symbols[symbol_key];
                                                 const { display } = symbol;
                                                 const isSelected = symbol_key === selectedMarket;
 
                                                 return (
-                                                    <div key={symbol_key} data-id={market_key}>
-                                                        <DropdownItem
-                                                            onClick={() => handleUnderlyingClick(symbol_key)}
-                                                            label={display}
-                                                            selected={isSelected}
-                                                            className={isSelected && 'market-item-selected'}
-                                                            size='md'
-                                                        />
-                                                    </div>
+                                                    <DropdownItem
+                                                        key={symbol_key}
+                                                        data-id={market_key}
+                                                        onClick={() => handleUnderlyingClick(symbol_key)}
+                                                        label={display}
+                                                        selected={isSelected}
+                                                        className={isSelected && 'market-item-selected'}
+                                                        size='md'
+                                                    />
                                                 );
                                             })}
                                             <Divider />