fix(suite): fix clipped HiddenPlaceholder blur

Author: Lemonexe

packages/suite/src/components/suite/layouts/SuiteLayout/SubpageNavigation.tsx

@@ -15,7 +15,7 @@ const Container = styled.div`
     top: ${HEADER_HEIGHT};
     background: ${({ theme }) => theme.backgroundSurfaceElevation0};
     border-bottom: 1px solid ${({ theme }) => theme.borderElevation1};
-    z-index: ${zIndices.pageHeader};
+    z-index: ${zIndices.stickyBar};
     width: 100%;
     padding: ${spacingsPx.md} ${spacingsPx.md} 0;
 `;

packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountTopPanel.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from 'react';
 
 import styled from 'styled-components';
 
-import { spacingsPx } from '@trezor/theme';
+import { spacingsPx, zIndices } from '@trezor/theme';
 import { NetworkSymbol } from '@suite-common/wallet-config';
 import { SkeletonCircle, SkeletonRectangle } from '@trezor/components';
 import { CoinLogo } from '@trezor/product-components';
@@ -23,6 +23,7 @@ const Container = styled.div`
     padding-left: ${spacingsPx.md};
     padding-right: ${spacingsPx.md};
     margin-top: ${spacingsPx.lg};
+    z-index: ${zIndices.pageSubHeader};
 `;
 
 const AccountCryptoBalance = styled.div`

packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountItem/AccountItemContent.tsx

@@ -13,16 +13,19 @@ import {
 } from '@trezor/components';
 import { isTestnet } from '@suite-common/wallet-utils';
 
-import { useLoadingSkeleton, useSelector } from '../../../../../hooks/suite';
-import { selectLocalCurrency } from '../../../../../reducers/wallet/settingsReducer';
+import { useLoadingSkeleton, useSelector } from 'src/hooks/suite';
+import {
+    selectIsDiscreteModeActive,
+    selectLocalCurrency,
+} from 'src/reducers/wallet/settingsReducer';
 import {
     AccountLabel,
     CoinBalance,
     FiatValue,
     HiddenPlaceholder,
     Translation,
-} from '../../../../suite';
-import { AccountItemType } from '../../../../../types/wallet';
+} from 'src/components/suite';
+import { AccountItemType } from 'src/types/wallet';
 
 const AccountLabelContainer = styled.div`
     flex: 1;
@@ -32,6 +35,7 @@ const AccountLabelContainer = styled.div`
     text-overflow: ellipsis;
     white-space: nowrap;
 `;
+
 type ItemContentProps = {
     customFiatValue?: string;
     account: Account;
@@ -43,6 +47,14 @@ type ItemContentProps = {
     formattedBalance: string;
     dataTestKey?: string;
 };
+
+const FiatValueRenderComponent = ({ value }: { value: JSX.Element | null }) => {
+    const discreetMode = useSelector(selectIsDiscreteModeActive);
+    if (discreetMode || value === null) return value;
+
+    return <TruncateWithTooltip delayShow={TOOLTIP_DELAY_LONG}>{value}</TruncateWithTooltip>;
+};
+
 export const AccountItemContent = ({
     customFiatValue,
     account,
@@ -56,12 +68,14 @@ export const AccountItemContent = ({
 }: ItemContentProps) => {
     const { FiatAmountFormatter } = useFormatters();
     const localCurrency = useSelector(selectLocalCurrency);
+    const discreetMode = useSelector(selectIsDiscreteModeActive);
     const { shouldAnimate } = useLoadingSkeleton();
 
     const isBalanceShown = account.backendType !== 'coinjoin' || account.status !== 'initial';
 
     return (
-        <Column flex="1" overflow="hidden" gap={spacings.xxxs}>
+        // content is constant size in discreet mode, so overflow: hidden is unnecessary. Though it would cut off CSS blur effect, so we may turn it off
+        <Column flex="1" overflow={discreetMode ? 'visible' : 'hidden'} gap={spacings.xxxs}>
             <Row gap={spacings.md} margin={{ right: spacings.xxs }} justifyContent="space-between">
                 <AccountLabelContainer data-testid={`${dataTestKey}/label`}>
                     {type === 'coin' && (
@@ -93,13 +107,7 @@ export const AccountItemContent = ({
                             maximumFractionDigits: 0,
                         }}
                     >
-                        {({ value }) =>
-                            value ? (
-                                <TruncateWithTooltip delayShow={TOOLTIP_DELAY_LONG}>
-                                    {value}
-                                </TruncateWithTooltip>
-                            ) : null
-                        }
+                        {FiatValueRenderComponent}
                     </FiatValue>
                 )}
             </Row>

packages/theme/src/zIndices.ts

@@ -17,7 +17,8 @@ export const zIndices = {
     navigationBar: 30,
     expandableNavigationHeader: 21, // above EXPANDABLE_NAVIGATION to cover its box-shadow
     expandableNavigation: 20, // above PAGE_HEADER to spread over it
-    pageHeader: 11, // above STICKY_BAR to hide it when the page is on top
+    pageHeader: 12, // above STICKY_BAR to hide it when the page is on top
+    pageSubHeader: 11, // below PAGE_HEADER to be hidden beneath it, but above STICKY_BAR
     stickyBar: 10, // above page content to scroll over it
     secondaryStickyBar: 9, // below STICKY_BAR so that it can hide beneath it when no longer needed
     selectMenu: 3,