Copilot - The bottom line of the pop-up modal is not visible

[IuliiaHerets]

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.0.49-0 Reproducible in staging?: Y Reproducible in production?: N/A - new feature, doesn't exist in prod Email or phone of affected tester (no customers): applausetester+kh081006@applause.expensifail.com Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Security > Add copilot.
3. Add a copilot.
4. Click 3-dot menu next to the copilot.

Expected Result:

The bottom line of the pop-up modal should be visible.

Actual Result:

The bottom line of the pop-up modal is not visible. This issue is not reproducible when the display is very zoomed out (wide screen).

Workaround:

Unknown

Platforms:

• [ ] Android: Native
• [ ] Android: mWeb Chrome
• [ ] iOS: Native
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/13d79c9d-8f57-4cee-a25a-e2c21a2dd625

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @grgia

[melvin-bot[bot]]

Triggered auto assignment to @kadiealexander (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.

[melvin-bot[bot]]

Triggered auto assignment to @grgia (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot[bot]]

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

[github-actions[bot]]

:wave: 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.

[marcaaron]

cc @dangrous @rushatgabhane @allgandalf looks related to https://github.com/Expensify/App/pull/47984

[marcaaron]

Pre-req: be on copilot beta.

I think this can be demoted.

[marcaaron]

But please address before removing the beta?

[dangrous]

@rushatgabhane can you put up a PR for this one? Would be great to get it sorted by the end of the week!

[dangrous]

@rushatgabhane do you have time for this one or should we open it up? We just have to rejigger this section I think, probably including the windowHeight and adding a Math.min() in there in some way. I think there's also some left/right wonkiness that we should look at.

I realize you took this code from some other places in the app that use similar behavior but for whatever reason it doesn't seem to fit here (maybe doesn't there either, who knows).

https://github.com/Expensify/App/blob/a8e1b1365335eb9a592024e52eaa6684a12360b8/src/pages/settings/Security/SecuritySettingsPage.tsx#L74-L80

[allgandalf]

not overdue, waiting for @rushatgabhane 🙇

[twilight2294]

Proposal

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

The bottom line of the pop-up modal is not visible

What is the root cause of that problem?

The problem is with anchorPositionRight: https://github.com/Expensify/App/blob/a8e1b1365335eb9a592024e52eaa6684a12360b8/src/pages/settings/Security/SecuritySettingsPage.tsx#L74-L80

Here the wrong size is calculated for the right position.

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

We should update the anchorposition calculation:

https://github.com/Expensify/App/blob/a8e1b1365335eb9a592024e52eaa6684a12360b8/src/pages/settings/Security/SecuritySettingsPage.tsx#L285-L288

Here instead of right we should calculate for the left anchor position, we should also define anchorPositionLeft and give it a custom value of 339

        setAnchorPosition({
            anchorPositionLeft: position.x + 339,

        });

<Popover
      anchorPosition={{
              top: anchorPosition.anchorPositionTop,
              left: anchorPosition.anchorPositionLeft,
       }}

What alternative solutions did you explore? (Optional)

[dangrous]

bump @rushatgabhane - is this something you can handle or should we open up for contributors?

[rushatgabhane]

let me give it a try

[rushatgabhane]

PR for the fix here - https://github.com/Expensify/App/pull/51204

[kadiealexander]

Reassigning for someone to handle payment as I'm OOO for the next two weeks.

[melvin-bot[bot]]

Triggered auto assignment to @slafortune (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.

[melvin-bot[bot]]

@dangrous, @slafortune, @rushatgabhane, @allgandalf Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[dangrous]

PR in review! we just have one improvement to make to the design (coloring the icon) and then we'll be good to merge

[melvin-bot[bot]]

@dangrous, @slafortune, @rushatgabhane, @allgandalf Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot[bot]]

@dangrous, @slafortune, @rushatgabhane, @allgandalf Still overdue 6 days?! Let's take care of this!

[dangrous]

PR in revierw

[allgandalf]

Lets make it weekly until the PR hits production @dangrous

[melvin-bot[bot]]

@dangrous, @slafortune, @rushatgabhane, @allgandalf Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!