fix(suite): Fix trade heading

Author: jvaclavik

packages/suite/src/components/suite/layouts/SuiteLayout/PageHeader/TradeActions.tsx

@@ -2,8 +2,9 @@ import styled, { css } from 'styled-components';
 
 import { selectSelectedDevice } from '@suite-common/wallet-core';
 import { SelectedAccountStatus } from '@suite-common/wallet-types';
-import { Row, variables } from '@trezor/components';
+import { Row } from '@trezor/components';
 import { hasBitcoinOnlyFirmware } from '@trezor/device-utils';
+import { breakpointMediaQueries } from '@trezor/styles';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 
@@ -19,11 +20,22 @@ const ShowOnLargeDesktopWrapper = styled.div<{ $isActive?: boolean }>`
     ${({ $isActive }) =>
         $isActive &&
         css`
-            ${variables.SCREEN_QUERY.BELOW_DESKTOP} {
+            ${breakpointMediaQueries.below_xl} {
                 display: none;
             }
         `}
 `;
+
+const ShowOnDesktopWrapper = styled.div<{ $isActive?: boolean }>`
+    ${({ $isActive }) =>
+        $isActive &&
+        css`
+            ${breakpointMediaQueries.below_lg} {
+                display: none;
+            }
+        `}
+`;
+
 interface TradeActionsProps {
     selectedAccount?: SelectedAccountStatus;
     hideBuyAndSellBelowDesktop?: boolean;
@@ -79,20 +91,22 @@ export const TradeActions = ({
                     </HeaderActionButton>
                 </ShowOnLargeDesktopWrapper>
                 {!hasBitcoinOnlyFirmware(device) && (
-                    <HeaderActionButton
-                        icon="arrowsLeftRight"
-                        onClick={() => {
-                            goToWithAnalytics('wallet-trading-exchange', {
-                                preserveParams: true,
-                            });
-                        }}
-                        data-testid="@wallet/menu/wallet-trading-exchange"
-                        variant="tertiary"
-                        size="small"
-                        isDisabled={isAccountLoading}
-                    >
-                        <Translation id="TR_TRADING_SWAP" />
-                    </HeaderActionButton>
+                    <ShowOnDesktopWrapper $isActive={hideBuyAndSellBelowDesktop}>
+                        <HeaderActionButton
+                            icon="arrowsLeftRight"
+                            onClick={() => {
+                                goToWithAnalytics('wallet-trading-exchange', {
+                                    preserveParams: true,
+                                });
+                            }}
+                            data-testid="@wallet/menu/wallet-trading-exchange"
+                            variant="tertiary"
+                            size="small"
+                            isDisabled={isAccountLoading}
+                        >
+                            <Translation id="TR_TRADING_SWAP" />
+                        </HeaderActionButton>
+                    </ShowOnDesktopWrapper>
                 )}
             </AppNavigationTooltip>
         </Row>