Android & iOS - Copilot - Copilot tooltip is out of view

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.78-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #100817
Email or phone of affected tester (no customers): sdiuhbdsiuhusih@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: iPhone 15 Pro Max / iOS 26.6.1
App Component: User Settings

Action Performed:

1. Launch Expensify app.
2. Go to Account > Agents.
3. Create an agent.
4. Return to Account page.

Expected Result:

Copilot tooltip will not be out of view.

Actual Result:

Copilot tooltip is out of view.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7259895_1789435933175.5.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7259895

[applause-bot]

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

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #100817

[github-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.

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[MelvinBot]

🔍 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.

[shawnborton]

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