[No QA] Unify avatar sizes by jmusial · Pull Request #95275 · Expensify/App

jmusial · 2026-07-03T12:34:55Z

Explanation of Change

Replaces the legacy ad-hoc avatar sizes (SMALL_NORMAL, HEADER, LARGE_BORDERED, …) with a linear xxxx-small (12px) → xxxx-large (100px) scale backed by centralized tokens and exhaustive style maps. Unifies how avatar borders are handled.

Visual changes

None - all sizes are pixel-identical. The two spots where new defaults would have differed (subscript border on 100px avatars, workspace avatar radius in RoomHeaderAvatars) keep their old values explicitly. (AttendeesCell's stacked-row container now includes the avatar border in its height for consistency with other stacks — layout-neutral, row height is padding-driven.)

Dead code

Removed HeaderView's 32px SMALL_NORMAL subscript branch — unreachable, since ReportHeader sends all expense-request reports to MoneyRequestHeader first.

Fixed Issues

$ #95598

PROPOSAL:
Coming from this thread

Tests

Refactor mostly without impact for the user, some basic tests:

Open app
Navigate through pages, verify that avatar sizes are the same as on prod/staging.

Offline tests

Same as tests

QA Steps

N/A

PR Author Checklist

Screenshots/Videos

MacOS: Chrome / Safari

Screen.Recording.2026-07-07.at.16.34.32.mov

jmusial · 2026-07-03T12:48:54Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0787653f3d

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

codecov · 2026-07-03T14:35:38Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`94.81% <ø> (ø)`
src/components/AccountManagerBookCallButton.tsx	`100.00% <ø> (ø)`
src/components/AvatarButtonWithIcon.tsx	`100.00% <ø> (ø)`
src/components/AvatarSelector.tsx	`100.00% <100.00%> (ø)`
src/components/HeaderWithBackButton/index.tsx	`89.21% <ø> (ø)`
src/components/ImportedFromAccountingSoftware.tsx	`0.00% <ø> (ø)`
src/components/OnboardingHelpDropdownButton.tsx	`95.65% <100.00%> (+0.41%)`	⬆️
src/components/ReceiptEmptyState.tsx	`97.22% <100.00%> (+0.07%)`	⬆️
src/components/ReportActionItem/TaskView.tsx	`85.71% <ø> (ø)`
...m/TransactionPreview/TransactionPreviewContent.tsx	`79.83% <ø> (ø)`
... and 48 more
... and 49 files with indirect coverage changes

jmusial · 2026-07-03T14:36:17Z

@codex review

chatgpt-codex-connector · 2026-07-03T14:43:49Z

Codex Review: Didn't find any major issues. Hooray!

Reviewed commit: 6b060a8646

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

jmusial · 2026-07-24T10:45:48Z

@codex review

chatgpt-codex-connector · 2026-07-24T10:55:44Z

Codex Review: Didn't find any major issues. Keep it up!

Reviewed commit: 9edb8b62f6

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

melvin-bot · 2026-07-24T11:35:02Z

@ChavdaSachin Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

jmusial · 2026-07-24T11:38:14Z

cc. @roryabraham the unification of Avatar sizes. also cc @Expensify/design as this came of our discussion.
There should not be any user noticeable changes.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 79b05124e1

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

chatgpt-codex-connector · 2026-07-24T11:44:30Z

        <ReportActionAvatars
            reportID={report?.reportID}
-            size={shouldShowSubscript ? defaultSubscriptSize : undefined}
            singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}


Restore the fallback 32px expense-thread avatar size

When an expense-request thread is opened before its parent report action collection is available, ReportHeader computes isReportTransactionThread(report) as false and mounts HeaderView; ReportHeader does not subscribe to that parent action, while HeaderView does via useParentReportAction, so this component can stay mounted after shouldReportShowSubscript() becomes true. Without the removed isExpenseRequest(report) size override, those direct/deeplinked expense-thread headers render the subscript avatar at the default 40px size instead of the previous 32px size, causing a visible header layout regression. Please keep the 32px mapping here or make the header variant selection reactive to the parent action.

Useful? React with 👍 / 👎.

Removing 32px size is intentional per comment here

joekaufmanexpensify

Good for product.

roryabraham

Overall huge fan of this change. It's definitely bit tricky to sort through, so thank you for doing it! Much more orderly now.

roryabraham · 2026-07-25T00:29:31Z

+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.componentBorderRadiusLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.componentBorderRadiusLarge,
+} satisfies Record<AvatarSizeName, number>;


Should this be:

Suggested change

} satisfies Record<AvatarSizeName, number>;

} as const satisfies Record<AvatarSizeName, number>;

?

roryabraham · 2026-07-25T00:30:00Z

+    [CONST.AVATAR_SIZE.XX_LARGE]: variables.avatarSizeXxLarge,
+    [CONST.AVATAR_SIZE.XXX_LARGE]: variables.avatarSizeXxxLarge,
+    [CONST.AVATAR_SIZE.XXXX_LARGE]: variables.avatarSizeXxxxLarge,
+} satisfies Record<AvatarSizeName, number>;


Same here, should it be:

Suggested change

} satisfies Record<AvatarSizeName, number>;

} as const satisfies Record<AvatarSizeName, number>;

?

roryabraham · 2026-07-25T00:31:05Z

+    avatarBorderWidthSmall: 2,
+    avatarBorderWidthDefault: 3,
+    avatarBorderWidthLarge: 4,
+};


Suggested change

};

} as const;

?

roryabraham · 2026-07-25T00:34:53Z

@ChavdaSachin awaiting C+ review on this PR

ChavdaSachin · 2026-07-25T22:17:33Z

        assigneeTextStyle: {
            ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
-            minHeight: variables.avatarSizeSubscript,
+            minHeight: variables.avatarSizeXxxSmall,


This is inconsistent; the previous size avatarSizeSubscript resolved to 20px, while the current size avatarSizeXxxSmall resolves to 16px.

Suggested change

minHeight: variables.avatarSizeXxxSmall,

minHeight: variables.avatarSizeXxSmall,

Unify avatar sizes

82b54cd

melvin-bot Bot assigned jmusial Jul 3, 2026

Merge branch 'main' into chore/unify-avatar-sizes-v2

0787653

chatgpt-codex-connector Bot reviewed Jul 3, 2026

View reviewed changes

Comment thread src/styles/utils/index.ts

Comment thread src/pages/iou/request/step/IOURequestStepScan/hooks/useReceiptPreviewsSizes.ts

fix mock

6b060a8

Merge branch 'main' into chore/unify-avatar-sizes-v2

e44fb4c

jmusial changed the title ~~Unify avatar sizes~~ [No QA] Unify avatar sizes Jul 7, 2026

This was referenced Jul 8, 2026

[Tracking] Decompose Avatar component #95596

Open

[M2] Unify avatar sizes #95598

Open

jmusial mentioned this pull request Jul 9, 2026

Chore/unify avatar sizes #94949

Closed

43 tasks

jmusial added 7 commits July 9, 2026 14:00

Merge branch 'main' into chore/unify-avatar-sizes-v2

88fa3f4

unify bordering of avatars

d636309

cleanup unrelated stylistic changes

39157d8

remove doubled size declarations

07ad0b6

Merge branch 'main' into chore/unify-avatar-sizes-v2

f031316

fix typecheck

0e2aa27

self review

9edb8b6

fix knip

79b0512

jmusial marked this pull request as ready for review July 24, 2026 11:34

jmusial requested review from a team as code owners July 24, 2026 11:34

melvin-bot Bot requested review from ChavdaSachin and removed request for a team July 24, 2026 11:35

melvin-bot Bot requested review from joekaufmanexpensify and removed request for a team July 24, 2026 11:35

github-actions Bot reviewed Jul 24, 2026

View reviewed changes

Comment thread src/components/ReportActionAvatars/ReportActionAvatar.tsx Outdated

chatgpt-codex-connector Bot reviewed Jul 24, 2026

View reviewed changes

apply ai reviewer fix

4302193

joekaufmanexpensify approved these changes Jul 24, 2026

View reviewed changes

roryabraham approved these changes Jul 25, 2026

View reviewed changes

ChavdaSachin suggested changes Jul 25, 2026

View reviewed changes

	} satisfies Record<AvatarSizeName, number>;
	} as const satisfies Record<AvatarSizeName, number>;

	minHeight: variables.avatarSizeXxxSmall,
	minHeight: variables.avatarSizeXxSmall,

Uh oh!

Conversation

jmusial commented Jul 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Visual changes

Dead code

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

jmusial commented Jul 3, 2026

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

codecov Bot commented Jul 3, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jmusial commented Jul 3, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jul 3, 2026

Uh oh!

jmusial commented Jul 24, 2026

Uh oh!

chatgpt-codex-connector Bot commented Jul 24, 2026

Uh oh!

melvin-bot Bot commented Jul 24, 2026

Uh oh!

jmusial commented Jul 24, 2026

Uh oh!

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

jmusial Jul 24, 2026

Choose a reason for hiding this comment

Uh oh!

joekaufmanexpensify left a comment

Choose a reason for hiding this comment

Uh oh!

roryabraham left a comment

Choose a reason for hiding this comment

Uh oh!

roryabraham Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

roryabraham commented Jul 25, 2026

Uh oh!

ChavdaSachin Jul 25, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jmusial commented Jul 3, 2026 •

edited

Loading

codecov Bot commented Jul 3, 2026 •

edited by github-actions Bot

Loading