Fix Distance badge overlaps with one another - #98572
Conversation
|
@Expensify/design @JmillsExpensify it now anchors each badge at a different share of its own route: 1/3 and 2/3 so that they do not overlap. LMK if this is ok: Screen.Recording.2026-08-13.at.13.00.38.mov |
|
@codex please review |
|
I think that feels pretty good. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 57d7fe9b35
ℹ️ 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".
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep them coming! Reviewed commit: ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
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". |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safarichrome.mp4 |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
Pretty confident that the failure is unrelated and would be fixed by merging main. So rather than blocking on this (I can't merge main into a branch in the software-mansion-labs fork), I'm going to merge with failing tests to make progress on the deploy blocker |
|
@roryabraham looks like this was merged without a test passing. These checks had not passed on 9377dd6 when it was merged:
Please add a note explaining why this was done and remove the |
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
confirmed - tests passed after merge to main: https://github.com/Expensify/App/actions/runs/31747132101 |
…stance-badge-overlaps-with-one-another Fix Distance badge overlaps with one another (cherry picked from commit 905fdaf) (cherry-picked to staging by roryabraham)
|
🔁 Filed a Staging retest request for deploy blockers #98492 after this PR was cherry-picked to staging. |
|
🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.53-7 🚀
|
|
🤖 I reviewed the changes in this PR against the help site articles under No help site changes are required. This PR is a purely visual fix: The relevant help article, Distance Expenses, documents how to create map-based Distance expenses (enter Start/Stop, review, create). It does not describe map-level rendering details like badge positioning or alternate-route display — and per the help authoring guidelines it shouldn't, since that's presentation-level behavior rather than documented functionality. Nothing in it (or any other article) is contradicted by this change. Since no changes are required, no draft help site PR was created. @GCyganek, let me know if you'd like a docs PR anyway or believe an article should cover this. |
|
🚀 Deployed to production by https://github.com/roryabraham in version: 9.4.53-10 🚀
Bundle Size Analysis (Sentry): |
|
🚀 Cherry-picked to staging by https://github.com/roryabraham in version: 9.4.54-0 🚀
|
|
🤖 Follow-up: I re-verified this against the live New Expensify UI, and my conclusion stands — no help site changes are required. I walked the flow this PR touches (➕ Create → Track distance → Map → enter Start/Stop → route + distance badge) and confirmed:
Nothing in the article (or any other) is contradicted by this change, so I did not create a draft help site PR. Live UI evidenceTrack distance → Map tab (Map/Manual/GPS/Odometer, Start/Stop rows, Next)
Rendered route with distance badge
Since no changes are required, no draft help site PR was created. @GCyganek, let me know if you'd still like a docs PR or believe an article should cover this behavior. |
6 participants
Explanation of Change
The primary and alternate distance badges were both anchored at the point of their route closest to the map center, so they overlapped wherever the routes ran together.
getDistanceSymbolCoordinatesinMapView/utils.tsnow anchors each badge at a different share of its own route (33% / 66%), measured by length. A lone badge keeps the old center-based placement.DistanceSymboljust receives the coordinate.Fixed Issues
$ #98492
PROPOSAL: N/A
Tests
Offline tests
N/A
QA Steps
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectionAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-08-13.at.13.25.13.mov
Android: mWeb Chrome
iOS: Native
Screen.Recording.2026-08-13.at.13.24.19.mov
iOS: mWeb Safari
MacOS: Chrome / Safari
Screen.Recording.2026-08-13.at.13.00.38.mov