[Due for payment 2026-10-01] Android & iOS - Copilot - Copilot tooltip is out of view #101151

Activity

1. applause-bot commented on Sep 15, 2026

   

   applause-botBot

   on Sep 15, 2026

   Author

   More actions

   While Applause doesn't embed attachments for this bug, here are the links for quick view:
   https://platform.applause.com/services/links/v1/external/cdbb694e49e464f72ee8a06db02603792d463ff355e9dcc445d9948001cdfd03
2. gleitebr

   added this to #expensify-bugson Sep 15, 2026
3. applause-bot

   added

   DeployBlockerCashThis issue or pull request should block deploymentThis issue or pull request should block deployment

   BugSomething is broken. Auto assigns a BugZero manager.Something is broken. Auto assigns a BugZero manager.

   on Sep 15, 2026
4. melvin-bot commented on Sep 15, 2026

   

   melvin-botBot

   on Sep 15, 2026 – with Melvin Bot

   More actions

   You have been assigned to this deploy blocker because you recently merged this PR: #100817
5. melvin-bot

   assigned

   stitesExpensify

   on Sep 15, 2026
6. github-actions

   added

   Engineering

   HourlyKSv2KSv2

   on Sep 15, 2026
7. github-actions commented on Sep 15, 2026

   

   github-actionsBot

   on Sep 15, 2026 – with GitHub Actions

   Contributor

   More actions

   👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

   1. Identify the pull request that introduced this issue and revert it.
   2. Find someone who can quickly fix the issue.
   3. Fix the issue yourself.
8. melvin-bot

   assigned

   grgia

   on Sep 15, 2026
9. melvin-bot commented on Sep 15, 2026

   

   melvin-botBot

   on Sep 15, 2026 – with Melvin Bot

   More actions

   @stitesExpensify @grgia @huult you have been assigned to this deploy blocker because you reviewed the offending PR: #100817
10. melvin-bot

    assigned

    huult

    on Sep 15, 2026
11. melvin-bot commented on Sep 15, 2026

    

    melvin-botBot

    on Sep 15, 2026 – with Melvin Bot

    More actions

    💬 A slack conversation has been started in #expensify-open-source
12. MelvinBot commented on Sep 15, 2026

    

    MelvinBot

    on Sep 15, 2026

    Contributor

    More actions

    🔍 Investigation Summary

    Classification: Frontend bug
    Causing PR: #100817 - "[Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile" by @MelvinBot (approved by @huult, @grgia, @stitesExpensify) (High confidence)
    Related Issues: None found

    Recommendation: ROLL FORWARD

    The Copilot (account switcher) educational tooltip is right-aligned to the "Switch" button, and #100817 moved that button from the right edge of the header row to the horizontal center on native narrow layouts, so the tooltip now extends past the left edge of the screen — and on native the off-screen clamp is disabled by default. The fix is a 2-3 line change in AccountSwitcher.tsx (center the tooltip anchor in the stacked layout and/or opt into computeHorizontalShiftForNative), which is far smaller and safer than reverting a PR that also changed the skeleton view, avatar sizing and styles; if a fix isn't up before the deploy window closes, revert #100817.

    Assigned: @huult, @grgia, @stitesExpensify (approving reviewers of #100817) — already assigned by Melvin, no change needed
    Labels: No changes. DeployBlockerCash kept (App-side fix required); DeployBlocker was not present, so nothing was removed.

    📋 Detailed Analysis

    Evidence

    • Reproducible on staging only, not production, and only on Android/iOS App (not mWeb/desktop web) — the native-only split is the key signal, see Root Cause.
    • Repro path is Account page → the only thing that changed on the Account page header in 9.4.78 is [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817, which merged 2026-09-14 13:21 UTC, inside this release.
    • I scanned every PR on the 9.4.78 deploy checklist for files matching tooltip|AccountSwitcher|ProductTraining|Delegate|InitialSettingsPage. Only two matched: [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817 and #99840 ("Add EducationalTooltip for Unread Tab"). Add EducationalTooltip for Unread Tab. #99840 only registers a new tooltip in TOOLTIPS.ts with its own priority and anchor; it changes no shared tooltip positioning logic and nothing about the account switcher, so it cannot move the Copilot tooltip off-screen.
    • [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817 is the only change that moves the tooltip's anchor element.

    Verification

    Affected files (all on e9e328b):

    • src/components/AccountSwitcher.tsx#L161-L184 — the educational tooltip props: anchorAlignment.horizontal = RIGHT, shiftHorizontal = 4, and no computeHorizontalShiftForNative.
    • src/components/AccountSwitcher.tsx#L274 — shouldStackHeader (added by [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817).
    • src/components/AccountSwitcher.tsx#L281-L292 — the stacked container is now alignItemsCenter instead of a flexRow.
    • src/components/AccountSwitcher.tsx#L339-L354 — the tooltip-wrapped "Switch" button, now a centered child of that container instead of the trailing item of the row.
    • src/styles/utils/generators/TooltipStyleUtils/index.ts#L204-L221 — right-aligned positioning math.
    • src/styles/utils/generators/TooltipStyleUtils/computeHorizontalShift/index.native.ts#L19-L22 — the native clamp, disabled unless opted in.

    Confirmed #100817 modifies src/components/AccountSwitcher.tsx (and src/pages/settings/InitialSettingsPage.tsx, which mirrors the same shouldStackHeader condition for the skeleton). It does not modify the tooltip utils — those were already native-permissive; the PR simply moved the anchor into the position where that pre-existing gap becomes visible.

    Root Cause

    For a right-aligned tooltip the wrapper's left edge is computed as:

    rootWrapperLeft = xOffset + manualShiftHorizontal + (tooltipTargetWidth - tooltipWidth)
    

    i.e. the tooltip's right edge is pinned to the anchor's right edge and it grows leftwards.

    • Before [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817 the header was a flexRow and the small "Switch" button was the last item, so its xOffset was near the right edge of the screen (≈ windowWidth - 20 - buttonWidth). Growing leftwards by the tooltip's ~300px width kept it fully on screen.
    • After [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817, on narrow portrait layouts the header stacks and centers, so the button's xOffset ≈ (windowWidth - buttonWidth) / 2. With buttonWidth ≈ 100 and the tooltip at ~300px (capped at maxWidth = sideBarWidth - 2 * uploadViewMargin = 335), on a 430pt device: 215 - 50 + 4 + (100 - 300) ≈ -31, and on a 390pt device ≈ -51. The tooltip's left portion lands outside the viewport.

    Why native only: computeHorizontalShift is what normally pulls a tooltip back inside the gutters, but the native implementation returns 0 immediately unless the caller passes computeHorizontalShiftForNative (index.native.ts#L19-L22). AccountSwitcher does not pass it. On web/mWeb the same overflow is silently corrected by the web implementation, which always clamps — which is exactly why the bug reproduces on Android/iOS App only.

    Suggested fix (in AccountSwitcher.tsx tooltip props): when shouldStackHeader is true, use ANCHOR_ORIGIN_HORIZONTAL.CENTER with shiftHorizontal: 0 so the tooltip is centered over the now-centered button, and pass computeHorizontalShiftForNative as a safety net so native clamps anything that still overflows.

    💡 Suggested AI code review rule

    This bug looks like a recurring, mechanically detectable pattern, so it may be worth a coding-standards rule so the AI reviewer catches the next one. Proposed for Expensify/App:

    • Rule: UI-4 Opt into computeHorizontalShiftForNative for edge-aligned tooltips
    • Condition: When a Tooltip/EducationalTooltip sets anchorAlignment.horizontal to LEFT or RIGHT, it must also pass computeHorizontalShiftForNative (or center the anchor), otherwise the tooltip can render off-screen on iOS/Android because the native computeHorizontalShift returns 0 by default and never clamps to the viewport.
    • Why: Edge-aligned tooltips grow away from the anchor; if the anchor is not near that screen edge, the tooltip overflows the viewport. Web clamps automatically, native does not, so the bug ships past web-only testing — as it did in [Design Polish] Use a bigger centered avatar and h1 name on the Account page on mobile #100817 / this issue.
    • Search pattern: rg -n "ANCHOR_ORIGIN_HORIZONTAL\.(LEFT|RIGHT)" src --glob '*.tsx' and, for each hit inside a Tooltip/EducationalTooltip prop object, check the same element for computeHorizontalShiftForNative. Other current call sites with this shape: src/components/ThreeDotsMenu/index.tsx, src/components/MoneyRequestConfirmationList/ConfirmationFooterContent.tsx.
    • Offending code (❌): AccountSwitcher.tsx#L161-L184 combined with the now-centered anchor at AccountSwitcher.tsx#L339-L354
    • Fix (✅): center the anchor alignment in the stacked layout and pass computeHorizontalShiftForNative (see Suggested fix above); the clamp itself lives in computeHorizontalShift/index.native.ts#L19-L22

    The full rule file, with the ❌/✅ code inline in App's coding-standards format, would go in Expensify/App itself (.claude/skills/app-coding-standards/rules/). If it's worth adding, a maintainer can open it there as a draft PR.
13. shawnborton commented on Sep 15, 2026

    

    shawnborton

    on Sep 15, 2026

    Contributor

    More actions

    Let's just use a centered tooltip style here. @MelvinBot can you implement the fix?

    👀React with 👀1Reacted by melvin-bot
14. 9 remaining items

    Load more
15. melvin-bot

    removed

    ReviewingHas a PR in reviewHas a PR in review

    on Sep 24, 2026
16. melvin-bot

    changed the title [-]Android & iOS - Copilot - Copilot tooltip is out of view[/-] [+][Due for payment 2026-10-01] Android & iOS - Copilot - Copilot tooltip is out of view[/+] on Sep 24, 2026
17. melvin-bot commented on Sep 24, 2026

    

    melvin-botBot

    on Sep 24, 2026 – with Melvin Bot

    More actions

    @huult

    The solution for this issue has been 🚀 deployed to production 🚀 in version 9.4.92-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

    • Center the Copilot tooltip on the stacked Account page header #101160

    If no regressions arise, payment will be issued on 2026-10-01. 🎊

    The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the Contributor+ Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]. If no checklist is needed for this issue, you can click: [no checklist button]
18. huult commented on Sep 25, 2026

    

    huult

    on Sep 25, 2026

    Contributor

    More actions

    No payment is needed
19. melvin-bot commented on Sep 28, 2026

    

    melvin-botBot

    on Sep 28, 2026 – with Melvin Bot

    More actions

    @huult Whoops! This issue is 2 days overdue. Let's get this updated quick!
20. melvin-bot

    added

    Overdue

    on Sep 28, 2026
21. huult commented on Sep 29, 2026

    

    huult

    on Sep 29, 2026

    Contributor

    More actions

    Not overdue
22. melvin-bot

    added

    Awaiting PaymentAuto-added when associated PR is deployed to productionAuto-added when associated PR is deployed to production

    and removed

    Overdue

    on Sep 29, 2026
23. melvin-bot

    assigned

    mallenexpensify

    on Sep 30, 2026
24. melvin-bot commented on Sep 30, 2026

    

    melvin-botBot

    on Sep 30, 2026 – with Melvin Bot

    More actions

    Triggered auto assignment to @mallenexpensify (Awaiting Payment)
25. melvin-bot commented on Sep 30, 2026

    

    melvin-botBot

    on Sep 30, 2026 – with Melvin Bot

    More actions

    Payment Summary

    Resolving PRs:

    • Center the Copilot tooltip on the stacked Account page header #101160

    • Reviewer: @huult owed $175 via NewDot

    BugZero Checklist (@mallenexpensify)

    • I have confirmed assignees, roles, and Upwork contracts look correct
    • I have paid out Upwork contracts / manual NewDot requests
    • [BugZero Assignee] I have created a GH issue for creating/updating the regression test once above steps have been agreed upon
26. huult commented on Oct 1, 2026

    

    huult

    on Oct 1, 2026

    Contributor

    More actions

    @grgia we can close this ticket

    👍React with 👍1Reacted by Matt Allen
27. mallenexpensify

    closed this as completedon Oct 1, 2026
28. github-project-automation

    moved this to Done in #expensify-bugson Oct 1, 2026