[Due for payment 2026-03-30] [$250] Workspace expense rooms have different spacing in LHN than non-workspace expense rooms

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.5-4
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @dannymcclain
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Open the app and expand the LHN.
2. Compare the vertical spacing between:
3. Workspace expense rooms
4. Non-workspace expense rooms

Expected Result:

Workspace expense rooms should have the same spacing as non-workspace expense rooms in the LHN. Add approximately 4px of additional spacing to the workspace expense rooms to align them with non-workspace rooms.

Actual Result:

Workspace expense rooms have less spacing, appearing visually inconsistent.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022014664467240823805
• Upwork Job ID: 2014664467240823805
• Last Price Increase: 2026-02-06

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[annaweber830]

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the Left Hand Navigation (Inbox/LHN chat list), workspace expense rooms (policy expense chats) have different horizontal spacing than non-workspace rooms.

What is the root cause of that problem?

Workspace expense rooms are rendered through the same LHN row component, but their row container ends up with ~4px less total vertical padding/height than other room types, so the gap between rows appears tighter.

What changes do you think we should make in order to solve the problem?

Apply a targeted +4px vertical padding adjustment to the LHN row container only for workspace expense rooms (isPolicyExpenseChat) so their spacing matches non-workspace rooms, without changing global list/row sizing.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Lines 262 to 263 in e54cfd4

	<View style={sidebarInnerRowStyle}>
	<View style={[styles.flexRow, styles.alignItemsCenter]}>

 const workspaceExpenseRoomSpacingStyle = optionItem.isPolicyExpenseChat ? {paddingTop: 14, paddingBottom: 14} : undefined;
<View style={[sidebarInnerRowStyle, workspaceExpenseRoomSpacingStyle]}>
                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>

What alternative solutions did you explore? (Optional)

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 127 in e54cfd4

const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];

const contentContainerStyles =
        isInFocusMode && optionItem?.isPolicyExpenseChat
            ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles(), styles.ml1]
            : isInFocusMode
              ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()]
              : [styles.flex1];

Alertnative 2: Adjust OptionRowLHN so that, in compact mode, rows that render multiple avatars get an extra 4px of left spacing before the text (to compensate for the smaller avatar-container margin used by small-size multiple avatars). This keeps the change local to the LHN and avoids changing global avatar spacing rules used elsewhere.

App/src/components/LHNOptionsList/OptionRowLHN.tsx

Line 128 in b58ac2a

const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];

Current code:

const contentContainerStyles = isInFocusMode ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles()] : [styles.flex1];

Updated code:

const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;
const shouldAlignMultipleAvatarRowsText = isInFocusMode && (optionItem?.icons?.length ?? 0) > 1;

const contentContainerStyles = isInFocusMode
    ? [styles.flex1, styles.flexRow, styles.overflowHidden, StyleUtils.getCompactContentContainerStyles(), shouldAlignMultipleAvatarRowsText ? styles.ml1 : undefined]
    : [styles.flex1];

This will shift the display name and alternate text together for multiple-avatar rows in compact mode, making all LHN titles line up horizontally.

[yatin-italy]

Proposal

Restate the problem this issue is trying to solve.
Workspace expense rooms in the LHN have less vertical spacing than non-workspace expense rooms, causing a cramped appearance.

What is the root cause of that problem?
The spacing invariant is violated: all LHN rows should have consistent vertical spacing regardless of room type. The code assumes optionRow and optionRowCompact (both with paddingTop: 12, paddingBottom: 12) provide sufficient spacing for all room types. Workspace expense rooms render with the same row styles but end up with ~4px less effective vertical spacing, indicating the styles don't account for workspace expense room content/layout differences.

What changes do you think we should make in order to solve the problem?

• Update the row style computation in OptionRowLHN to add extra vertical padding only for workspace expense rooms.
• Keep existing styles unchanged for all other room types.
• Apply the fix at the style computation layer so spacing stays consistent.

const isInFocusMode = viewMode === CONST.OPTION_MODE.COMPACT;

const baseRowStyle = isInFocusMode
    ? [
          styles.chatLinkRowPressable,
          styles.flexGrow1,
          styles.optionItemAvatarNameWrapper,
          styles.optionRowCompact,
          styles.justifyContentCenter,
      ]
    : [
          styles.chatLinkRowPressable,
          styles.flexGrow1,
          styles.optionItemAvatarNameWrapper,
          styles.optionRow,
          styles.justifyContentCenter,
      ];

const workspaceExpenseRoomPadding = optionItem?.isPolicyExpenseChat
    ? {paddingTop: 16, paddingBottom: 16}
    : undefined;

const sidebarInnerRowStyle = StyleSheet.flatten<ViewStyle>(
    workspaceExpenseRoomPadding
        ? [...baseRowStyle, workspaceExpenseRoomPadding]
        : baseRowStyle,
);

What alternative solutions did you explore? (Optional)
N/A

[abbasifaizan70]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-09 20:55:35 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

In the LHN (Left Hand Navigation), the space between the icon and the report/chat name is inconsistent: expense items (with the “E” icon and optional subscript avatar) use an 8px right margin on the icon container, while normal chat items (single avatar) use a 12px right margin. This makes the list look uneven.

What is the root cause of that problem?

In ReportActionAvatars, normal chat rows use the Single avatar path. The parent (e.g. OptionRowLHN) passes singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}, and that is forwarded to ReportActionAvatar.Single as containerStyles. So the icon container gets a 12px right margin (mr3).

Expense rows use the Subscript path (E icon + small avatar). The ReportActionAvatar.Subscript component had no prop for container styles. It always set its outer container style with StyleUtils.getContainerStyles(size) and never used anything from the parent. In getContainerStyles, when size is SMALL (e.g. LHN in compact/focus mode), the result includes emptyAvatarMarginSmall, which is marginRight: variables.avatarChatSpacing - 4 (8px). So the Subscript icon container got 8px, while the Single path used the parent’s 12px. The root cause is that Subscript did not accept or use the parent’s container styles, so it could not get the same 12px margin as Single.

What changes do you think we should make in order to solve the problem?

1. App/src/components/ReportActionAvatars/ReportActionAvatar.tsx — ReportActionAvatarSubscript

• Add an optional prop containerStyles (typed as StyleProp<ViewStyle>), destructured as containerStyles: containerStylesProp.
• For the outer container style, use the prop when it is provided, otherwise keep the previous behavior:
  const containerStyle = containerStylesProp ?? StyleUtils.getContainerStyles(size);

So when the parent passes container styles (e.g. [styles.actionAvatar, styles.mr3]), Subscript uses them; when not passed, it still uses getContainerStyles(size).

App/src/components/ReportActionAvatars/ReportActionAvatar.tsx

Lines 164 to 197 in f7fecaf

	function ReportActionAvatarSubscript({
	primaryAvatar,
	secondaryAvatar,
	size,
	shouldShowTooltip,
	noRightMarginOnContainer,
	subscriptAvatarBorderColor,
	subscriptCardFeed,
	fallbackDisplayName,
	useProfileNavigationWrapper,
	reportID,
	}: {
	primaryAvatar: IconType;
	secondaryAvatar: IconType;
	size: ValueOf<typeof CONST.AVATAR_SIZE>;
	shouldShowTooltip: boolean;
	noRightMarginOnContainer?: boolean;
	subscriptAvatarBorderColor?: ColorValue;
	subscriptCardFeed?: CompanyCardFeed | typeof CONST.EXPENSIFY_CARD.BANK;
	fallbackDisplayName?: string;
	useProfileNavigationWrapper?: boolean;
	reportID?: string;
	}) {
	const theme = useTheme();
	const styles = useThemeStyles();
	const StyleUtils = useStyleUtils();
	const illustrations = useThemeIllustrations();
	const companyCardFeedIcons = useCompanyCardFeedIcons();
	const isSmall = size === CONST.AVATAR_SIZE.SMALL;
	const containerStyle = StyleUtils.getContainerStyles(size);
	const subscriptAvatarStyle = useMemo(() => {
	if (size === CONST.AVATAR_SIZE.SMALL) {

New code (optional containerStyles prop; use it when provided):

function ReportActionAvatarSubscript({
    primaryAvatar,
    secondaryAvatar,
    size,
    shouldShowTooltip,
    noRightMarginOnContainer,
    subscriptAvatarBorderColor,
    subscriptCardFeed,
    fallbackDisplayName,
    useProfileNavigationWrapper,
    reportID,
    containerStyles: containerStylesProp,
}: {
    // ... existing props ...
    containerStyles?: StyleProp<ViewStyle>;
}) {
    // ...
    const containerStyle = containerStylesProp ?? StyleUtils.getContainerStyles(size);

2. App/src/components/ReportActionAvatars/index.tsx — Subscript render

• When rendering ReportActionAvatar.Subscript, pass the same container styles that are used for Single when not horizontally stacked:
  containerStyles={shouldStackHorizontally ? undefined : singleAvatarContainerStyle}

So in the LHN (and any other caller that passes singleAvatarContainerStyle), both Single and Subscript receive the same container styles and get the same 12px right margin.

App/src/components/ReportActionAvatars/index.tsx

Lines 157 to 172 in f7fecaf

	if (avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.SUBSCRIPT && (!!secondaryAvatar?.name || !!subscriptCardFeed)) {
	return (
	<ReportActionAvatar.Subscript
	primaryAvatar={primaryAvatar}
	secondaryAvatar={secondaryAvatar}
	size={size}
	shouldShowTooltip={shouldShowTooltip}
	noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
	subscriptAvatarBorderColor={subscriptAvatarBorderColor}
	subscriptCardFeed={subscriptCardFeed}
	useProfileNavigationWrapper={useProfileNavigationWrapper}
	fallbackDisplayName={fallbackDisplayName}
	reportID={reportID}
	/>
	);
	}

New code (pass singleAvatarContainerStyle when not horizontal stacking):

if (avatarType === CONST.REPORT_ACTION_AVATARS.TYPE.SUBSCRIPT && (!!secondaryAvatar?.name || !!subscriptCardFeed)) {
    return (
        <ReportActionAvatar.Subscript
            primaryAvatar={primaryAvatar}
            secondaryAvatar={secondaryAvatar}
            size={size}
            shouldShowTooltip={shouldShowTooltip}
            noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
            subscriptAvatarBorderColor={subscriptAvatarBorderColor}
            subscriptCardFeed={subscriptCardFeed}
            useProfileNavigationWrapper={useProfileNavigationWrapper}
            fallbackDisplayName={fallbackDisplayName}
            reportID={reportID}
            containerStyles={shouldStackHorizontally ? undefined : singleAvatarContainerStyle}
        />
    );
}

Demo

[paulnjs]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• Workspace expense rooms appear visually inconsistent due to reduced spacing, especially around avatars.

What is the root cause of that problem?

• The inconsistency originates from the avatar rendered as a subscript "+" in focus mode.

• The avatar in question is rendered in

  App/src/components/LHNOptionsList/OptionRowLHN.tsx

  Line 259 in 3779ccf

  <ReportActionAvatars

• Drilling deeper:

  • App/src/components/ReportActionAvatars/index.tsx

    Line 159 in 3779ccf

    <ReportActionAvatar.Subscript

  • App/src/components/ReportActionAvatars/ReportActionAvatar.tsx

    Line 216 in 3779ccf

    style={[containerStyle, noRightMarginOnContainer ? styles.mr0 : {}]}

• The inconsistency is caused by different marginRight values:

  • The avatar with the "+" symbol uses styles.emptyAvatarMargin as its containerStyle:
    

    App/src/styles/utils/index.ts

    Line 1839 in 3779ccf

    containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];

  • In contrast, the normal avatar uses a different marginRight value:
    

    App/src/components/LHNOptionsList/OptionRowLHN.tsx

    Line 268 in 3779ccf

    singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}

• This mismatch in spacing causes the visual inconsistency.

What changes do you think we should make in order to solve the problem?

• In

  App/src/styles/utils/index.ts

  Line 1839 in 3779ccf

  containerStyles = [styles.emptyAvatarSmall, styles.emptyAvatarMarginSmall];

  , update the container styles logic to conditionally apply the appropriate margin based on whether the component is being rendered in the LHN.

containerStyles = [
    styles.emptyAvatarSmall,
    isInLHN ? styles.emptyAvatarMargin : styles.emptyAvatarMarginSmall
];

• isInLHN should be a new parameter passed to the getContainerStyles function. This prop will be forwarded from

  App/src/components/LHNOptionsList/OptionRowLHN.tsx

  Line 259 in 3779ccf

  <ReportActionAvatars

  .

• This ensures that when in the LHN, the avatar uses the same margin as the standard avatar (which fixes the visual inconsistency). In other contexts, it retains its current smaller margin.

What alternative solutions did you explore? (Optional)

• One alternative considered was adjusting the marginRight of the standard avatar in here from mr3 to mr1.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022014664467240823805