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 [email protected] 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): [email protected]
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
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6634876_1728967955399.20241015_125044.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @grgia

[melvin-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]

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

[melvin-bot]

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

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

[marcaaron]

cc @dangrous @rushatgabhane @allgandalf looks related to #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).

App/src/pages/settings/Security/SecuritySettingsPage.tsx

Lines 74 to 80 in a8e1b13

	setAnchorPosition({
	anchorPositionTop: position.top + position.height - variables.bankAccountActionPopoverTopSpacing,
	// We want the position to be 23px to the right of the left border
	anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing,
	anchorPositionHorizontal: position.x + variables.addBankAccountLeftSpacing,
	anchorPositionVertical: position.y,
	});

[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:

App/src/pages/settings/Security/SecuritySettingsPage.tsx

Lines 74 to 80 in a8e1b13

	setAnchorPosition({
	anchorPositionTop: position.top + position.height - variables.bankAccountActionPopoverTopSpacing,
	// We want the position to be 23px to the right of the left border
	anchorPositionRight: windowWidth - position.right + variables.bankAccountActionPopoverRightSpacing,
	anchorPositionHorizontal: position.x + variables.addBankAccountLeftSpacing,
	anchorPositionVertical: position.y,
	});

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:

App/src/pages/settings/Security/SecuritySettingsPage.tsx

Lines 285 to 288 in a8e1b13

	anchorPosition={{
	top: anchorPosition.anchorPositionTop,
	right: anchorPosition.anchorPositionRight,
	}}

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 - #51204

[kadiealexander]

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

[melvin-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]

@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]

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

[melvin-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