Comment action menu doesn't scale/position, gets cut off

[stephanieelliott]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Comment action menu should scale/move when adjusting length of window

Actual Result:

Comment action menu stays fixed and doesn't move to stay aligned with the comment

Action Performed:

1. Log into Expensify.cash on desktop app or web browser
2. Click on a chat to view chat comments
3. Right click on a comment to reveal action menu
4. Adjust window, notice that the action menu does not scale and can become cut off

Workaround:

N/A [visual]

Platform:

Where is this issue occurring?

✔️ Web
iOS
Android
✔️ Desktop App
Mobile Web

Version Number: v. 1.0.39-5
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/159935
Notes/Photos/Videos:

2784.video.mp4

View all open jobs on Upwork

[stephanieelliott]

Upwork Job: https://www.upwork.com/jobs/~017d8adbf583f27074

[MelvinBot]

Triggered auto assignment to @Jag96 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[MelvinBot]

Triggered auto assignment to @marcaaron (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[KanwarBhajneek]

via Upwork Job Application

The issue arises when you open a ReportActionContextMenu in popover and resize the browser which is effectively "a click outside" the Context action menu on browser window edges.

The popover action menu should close on browser resize event according to me to be consistent with the behaviour of clicking outside the menu to close it or scroll the chat.
This can be done by handling window resize event in pages/home/report/ReportActionItem.js and calling this.hidePopover(); when dimensions are updated.

If the menu is not closed on resize it not only cuts off out of position but on further resizing to mobile size it appears as a fixed pop-bottom menu on web.

ReportActionItem.js


        componentDidMount() {
            this.updateDimensions();
            window.addEventListener('resize', this.updateDimensions.bind(this));
        }

        componentWillUnmount() {
            window.removeEventListener('resize', this.updateDimensions.bind(this));
        }

        updateDimensions() {
                // console.log('updateDimensions'); 
                this.hidePopover();
        }