From 9568d9c23393be5601df217d2f459444d6b5debb Mon Sep 17 00:00:00 2001 From: paulnjs Date: Fri, 20 Feb 2026 20:41:14 +0700 Subject: [PATCH 1/3] fix: Workspace expense rooms appear visually inconsistent --- src/components/LHNOptionsList/OptionRowLHN.tsx | 1 + src/components/ReportActionAvatars/ReportActionAvatar.tsx | 4 +++- src/components/ReportActionAvatars/index.tsx | 5 +++++ src/styles/utils/index.ts | 4 ++-- 4 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 412f8fdbd6009..3b842aa1276ec 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -267,6 +267,7 @@ function OptionRowLHN({ singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]} shouldShowTooltip={shouldOptionShowTooltip(optionItem)} reportID={optionItem?.reportID} + isInLHN={true} /> )} diff --git a/src/components/ReportActionAvatars/ReportActionAvatar.tsx b/src/components/ReportActionAvatars/ReportActionAvatar.tsx index aed43d750feea..da671da584135 100644 --- a/src/components/ReportActionAvatars/ReportActionAvatar.tsx +++ b/src/components/ReportActionAvatars/ReportActionAvatar.tsx @@ -173,6 +173,7 @@ function ReportActionAvatarSubscript({ fallbackDisplayName, useProfileNavigationWrapper, reportID, + isInLHN = false, }: { primaryAvatar: IconType; secondaryAvatar: IconType; @@ -184,6 +185,7 @@ function ReportActionAvatarSubscript({ fallbackDisplayName?: string; useProfileNavigationWrapper?: boolean; reportID?: string; + isInLHN?: boolean; }) { const theme = useTheme(); const styles = useThemeStyles(); @@ -192,7 +194,7 @@ function ReportActionAvatarSubscript({ const companyCardFeedIcons = useCompanyCardFeedIcons(); const isSmall = size === CONST.AVATAR_SIZE.SMALL; - const containerStyle = StyleUtils.getContainerStyles(size); + const containerStyle = StyleUtils.getContainerStyles(size, undefined, isInLHN); const subscriptAvatarStyle = useMemo(() => { if (size === CONST.AVATAR_SIZE.SMALL) { diff --git a/src/components/ReportActionAvatars/index.tsx b/src/components/ReportActionAvatars/index.tsx index 23eb986f4a9a6..f7859916dbaca 100644 --- a/src/components/ReportActionAvatars/index.tsx +++ b/src/components/ReportActionAvatars/index.tsx @@ -73,6 +73,9 @@ type ReportActionAvatarsProps = { /** chatReportID needed for the avatars logic. When provided, this will be used as a fallback if the snapshot is undefined */ chatReportID?: string; + + /** Whether avatars are displayed within a LHN */ + isInLHN?: boolean; }; /** @@ -106,6 +109,7 @@ function ReportActionAvatars({ invitedEmailsToAccountIDs, shouldUseCustomFallbackAvatar = false, chatReportID, + isInLHN = false, }: ReportActionAvatarsProps) { const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID); @@ -168,6 +172,7 @@ function ReportActionAvatars({ useProfileNavigationWrapper={useProfileNavigationWrapper} fallbackDisplayName={fallbackDisplayName} reportID={reportID} + isInLHN={isInLHN} /> ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8933b41e1e65b..c1b13b78a72ef 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1859,12 +1859,12 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar */ - getContainerStyles: (size: string, isInReportAction = false): ViewStyle[] => { + getContainerStyles: (size: string, isInReportAction = false, isInLHN = false): ViewStyle[] => { let containerStyles: ViewStyle[]; switch (size) { case CONST.AVATAR_SIZE.SMALL: - containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall]; + containerStyles = [styles.emptyAvatarSmall, isInLHN ? styles.emptyAvatarMargin : styles.emptyAvatarMarginSmall]; break; case CONST.AVATAR_SIZE.SMALLER: containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller]; From 614be5b469cf19611d50c82ab57bf96e4aa1b175 Mon Sep 17 00:00:00 2001 From: paulnjs Date: Fri, 20 Feb 2026 20:49:41 +0700 Subject: [PATCH 2/3] fix lint --- src/components/LHNOptionsList/OptionRowLHN.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 3b842aa1276ec..58c5f3fbbec3b 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -267,7 +267,7 @@ function OptionRowLHN({ singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]} shouldShowTooltip={shouldOptionShowTooltip(optionItem)} reportID={optionItem?.reportID} - isInLHN={true} + isInLHN /> )} From aff69b732a92ac21af942acbd949bf2b5d2bf523 Mon Sep 17 00:00:00 2001 From: paulnjs Date: Mon, 23 Feb 2026 14:13:43 +0700 Subject: [PATCH 3/3] update code --- src/components/LHNOptionsList/OptionRowLHN.tsx | 1 - src/components/ReportActionAvatars/ReportActionAvatar.tsx | 4 +--- src/components/ReportActionAvatars/index.tsx | 5 ----- src/styles/utils/index.ts | 4 ++-- 4 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.tsx b/src/components/LHNOptionsList/OptionRowLHN.tsx index 58c5f3fbbec3b..412f8fdbd6009 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.tsx +++ b/src/components/LHNOptionsList/OptionRowLHN.tsx @@ -267,7 +267,6 @@ function OptionRowLHN({ singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]} shouldShowTooltip={shouldOptionShowTooltip(optionItem)} reportID={optionItem?.reportID} - isInLHN /> )} diff --git a/src/components/ReportActionAvatars/ReportActionAvatar.tsx b/src/components/ReportActionAvatars/ReportActionAvatar.tsx index da671da584135..aed43d750feea 100644 --- a/src/components/ReportActionAvatars/ReportActionAvatar.tsx +++ b/src/components/ReportActionAvatars/ReportActionAvatar.tsx @@ -173,7 +173,6 @@ function ReportActionAvatarSubscript({ fallbackDisplayName, useProfileNavigationWrapper, reportID, - isInLHN = false, }: { primaryAvatar: IconType; secondaryAvatar: IconType; @@ -185,7 +184,6 @@ function ReportActionAvatarSubscript({ fallbackDisplayName?: string; useProfileNavigationWrapper?: boolean; reportID?: string; - isInLHN?: boolean; }) { const theme = useTheme(); const styles = useThemeStyles(); @@ -194,7 +192,7 @@ function ReportActionAvatarSubscript({ const companyCardFeedIcons = useCompanyCardFeedIcons(); const isSmall = size === CONST.AVATAR_SIZE.SMALL; - const containerStyle = StyleUtils.getContainerStyles(size, undefined, isInLHN); + const containerStyle = StyleUtils.getContainerStyles(size); const subscriptAvatarStyle = useMemo(() => { if (size === CONST.AVATAR_SIZE.SMALL) { diff --git a/src/components/ReportActionAvatars/index.tsx b/src/components/ReportActionAvatars/index.tsx index f7859916dbaca..23eb986f4a9a6 100644 --- a/src/components/ReportActionAvatars/index.tsx +++ b/src/components/ReportActionAvatars/index.tsx @@ -73,9 +73,6 @@ type ReportActionAvatarsProps = { /** chatReportID needed for the avatars logic. When provided, this will be used as a fallback if the snapshot is undefined */ chatReportID?: string; - - /** Whether avatars are displayed within a LHN */ - isInLHN?: boolean; }; /** @@ -109,7 +106,6 @@ function ReportActionAvatars({ invitedEmailsToAccountIDs, shouldUseCustomFallbackAvatar = false, chatReportID, - isInLHN = false, }: ReportActionAvatarsProps) { const accountIDs = passedAccountIDs.filter((accountID) => accountID !== CONST.DEFAULT_NUMBER_ID); @@ -172,7 +168,6 @@ function ReportActionAvatars({ useProfileNavigationWrapper={useProfileNavigationWrapper} fallbackDisplayName={fallbackDisplayName} reportID={reportID} - isInLHN={isInLHN} /> ); } diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index c1b13b78a72ef..be1350114f35e 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1859,12 +1859,12 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ /** * Returns container styles for showing the icons in MultipleAvatars/SubscriptAvatar */ - getContainerStyles: (size: string, isInReportAction = false, isInLHN = false): ViewStyle[] => { + getContainerStyles: (size: string, isInReportAction = false): ViewStyle[] => { let containerStyles: ViewStyle[]; switch (size) { case CONST.AVATAR_SIZE.SMALL: - containerStyles = [styles.emptyAvatarSmall, isInLHN ? styles.emptyAvatarMargin : styles.emptyAvatarMarginSmall]; + containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMargin]; break; case CONST.AVATAR_SIZE.SMALLER: containerStyles = [styles.emptyAvatarSmaller, styles.emptyAvatarMarginSmaller];