fix(suite): Heading buttons depends on content width

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

@@ -1,7 +1,7 @@
 import { Button, ButtonProps, IconButton, IconButtonProps } from '@trezor/components';
+import { breakpointThresholds } from '@trezor/styles';
 
-import { useSelector } from 'src/hooks/suite';
-import { selectWindowSize } from 'src/reducers/suite/windowReducer';
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
 
 export const HeaderActionButton = ({
     icon,
@@ -13,12 +13,11 @@ export const HeaderActionButton = ({
     children,
 }: Pick<ButtonProps, 'onClick' | 'data-testid' | 'variant' | 'size' | 'isDisabled' | 'children'> &
     Pick<IconButtonProps, 'icon'>) => {
-    const layoutSize = useSelector(selectWindowSize);
-
-    const isMobileLayout = layoutSize === 'TINY';
+    const { contentWidth } = useResponsiveContext();
+    const isContentAreaSmall = contentWidth ? contentWidth < breakpointThresholds.sm : false;
     const commonProps = { icon, onClick, 'data-testid': dataTestId, variant, size, isDisabled };
 
-    return isMobileLayout ? (
+    return isContentAreaSmall ? (
         <IconButton {...commonProps} />
     ) : (
         <Button {...commonProps}>{children}</Button>

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

@@ -1,9 +1,8 @@
-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 { breakpointThresholds } from '@trezor/styles';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { spacings } from '@trezor/theme';
 
@@ -14,16 +13,8 @@ import { HeaderActionButton } from 'src/components/suite/layouts/SuiteLayout/Pag
 import { useDispatch, useSelector } from 'src/hooks/suite';
 import { selectIsAccountTabPage, selectRouteName } from 'src/reducers/suite/routerReducer';
 
-// instant without computing the layout
-const ShowOnLargeDesktopWrapper = styled.div<{ $isActive?: boolean }>`
-    ${({ $isActive }) =>
-        $isActive &&
-        css`
-            ${variables.SCREEN_QUERY.BELOW_DESKTOP} {
-                display: none;
-            }
-        `}
-`;
+import { useResponsiveContext } from '../../../../../support/suite/ResponsiveContext';
+
 interface TradeActionsProps {
     selectedAccount?: SelectedAccountStatus;
     hideBuyAndSellBelowDesktop?: boolean;
@@ -59,10 +50,14 @@ export const TradeActions = ({
 
     const isAccountLoading = selectedAccount ? selectedAccount.status === 'loading' : false;
 
+    const { contentWidth } = useResponsiveContext();
+    const isContentAreaLarge = contentWidth ? contentWidth > breakpointThresholds.lg : true;
+    const isContentAreaMedium = contentWidth ? contentWidth > breakpointThresholds.md : true;
+
     return (
         <Row gap={spacings.xxs}>
             <AppNavigationTooltip>
-                <ShowOnLargeDesktopWrapper $isActive={hideBuyAndSellBelowDesktop}>
+                {isContentAreaLarge && hideBuyAndSellBelowDesktop && (
                     <HeaderActionButton
                         icon="currencyCircleDollar"
                         onClick={() => {
@@ -77,23 +72,25 @@ export const TradeActions = ({
                     >
                         <Translation id="TR_TRADING_BUY_AND_SELL" />
                     </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>
                 )}
+                {!hasBitcoinOnlyFirmware(device) &&
+                    isContentAreaMedium &&
+                    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>
+                    )}
             </AppNavigationTooltip>
         </Row>
     );