diff --git a/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx b/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx index bd00bd80d343..11753a53a4cc 100644 --- a/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx +++ b/src/pages/inbox/sidebar/NavigationTabBarAvatar.tsx @@ -6,6 +6,7 @@ import useAccountTabIndicatorStatus from '@hooks/useAccountTabIndicatorStatus'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -32,6 +33,7 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style}: Navigation const delegateEmail = account?.delegatedAccess?.delegate ?? ''; const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const emojiStatus = currentUserPersonalDetails?.status?.emojiCode ?? ''; + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {status} = useAccountTabIndicatorStatus(); /** @@ -76,12 +78,12 @@ function NavigationTabBarAvatar({onPress, isSelected = false, style}: Navigation wrapperStyle={styles.flex1} accessibilityState={accountAccessibilityState} aria-selected={accountAccessibilityState.selected} - style={({hovered}) => [style, hovered && styles.navigationTabBarItemHovered]} + style={({hovered}) => [style, !shouldUseNarrowLayout && hovered && styles.navigationTabBarItemHovered]} sentryLabel={CONST.SENTRY_LABEL.NAVIGATION_TAB_BAR.ACCOUNT} > {({hovered}) => ( <> - {renderAvatar(isSelected || hovered)} + {renderAvatar(isSelected || (!shouldUseNarrowLayout && hovered))} {translate('initialSettingsPage.account')}