[$500] Web - Request money-Tooltip is partially displayed on the chat page if drag a mouse to the left

[lanitochka17]

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: 1.4.21-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Expensify/Expensify Issue URL: Issue reported by: Applause - Internal Team Slack conversation:

Action Performed:

1. Open the URL https://staging.new.expensify.com/
2. Login with any account
3. Go to FAB -> Request money -> Manual
4. Hover the mouse over the currency to display a tooltip and move to the left

Expected Result:

Tooltip disappears on the chat page

Actual Result:

Tooltip is partially displayed on the chat page

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

https://github.com/Expensify/App/assets/78819774/af710344-aa8c-48b4-8a6d-41e7fd75be6c

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010c9c1639fe8bdd01
• Upwork Job ID: 1742675153533714432
• Last Price Increase: 2024-01-03

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~010c9c1639fe8bdd01

[melvin-bot[bot]]

Triggered auto assignment to @abekkala (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot[bot]]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [ ] This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• [ ] This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• [ ] This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• [ ] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[abzokhattab]

I am not sure if this is a bug.

[codebycarlos]

I think the main challenge here is the tooltip is always rendered in the body (much higher up in the DOM than the hover target). Hence why it doesn't get clipped during overflow.

[nabhiraj]

hi :) , the tooltip takes care of the gutterwidth to shift it left or right to avoid the over flow, but this only happens on the window level, we can can pass a gutter width for left and right boundary depending upon the right side navigator, i guess we can use this gutter widths to fix this.

[melvin-bot[bot]]

📣 @nabhiraj! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[nabhiraj]

Contributor details Your Expensify account email: nabhinewton04@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~010ffad1aef68cbf91

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[nabhiraj]

Proposal

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

when we select the currency symbol and drag to the left the tool-tip is overflowing on the chat window

What is the root cause of that problem?

this is happening because css property of the tool-tip is of display type fixed (but this is necessary because we want tool tip to hover over the element)

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

we can apply the same solution as we use in window level i.e we can use a gutter width, if the position of the tooltip crosses this gutter width then we can shift it towards the right side. we can get the offset of the righ navigation modal from the src/pages/iou/steps/MoneyRequestAmountForm.js

    let [viewWidth,setViewWidth] = useState(); 
    useEffect(
        ()=>{
            const rect = tempRef.current.getBoundingClientRect();
            console.log('hanele resize',rect.x);
            setViewWidth(rect.x);
        },[]);
//this tempRef (will think of a good name) will be the ref for View (i.e first child of ScrollView)

then we can drill these offeset paramenter till src/styles/getTooltipStyles.ts and there we can use this value to set gutterWidthValue something like this

function computeHorizontalShift(windowWidth: number, xOffset: number, componentWidth: number, tooltipWidth: number, manualShiftHorizontal: number,leftBoundryPos: number): number {
    // First find the left and right edges of the tooltip (by default, it is centered on the component).
    const componentCenter = xOffset + componentWidth / 2 + manualShiftHorizontal;
    const tooltipLeftEdge = componentCenter - tooltipWidth / 2;
    const tooltipRightEdge = componentCenter + tooltipWidth / 2;
    if(leftBoundryPos && tooltipLeftEdge < leftBoundryPos){
        return roundToNearestMultipleOfFour(leftBoundryPos - tooltipLeftEdge);
    }else if(tooltipLeftEdge < GUTTER_WIDTH) {
        // Tooltip is in left gutter, shift right by a multiple of four.
        return roundToNearestMultipleOfFour(GUTTER_WIDTH - tooltipLeftEdge);
    }

    if (tooltipRightEdge > windowWidth - GUTTER_WIDTH) {
        // Tooltip is in right gutter, shift left by a multiple of four.
        return roundToNearestMultipleOfFour(windowWidth - GUTTER_WIDTH - tooltipRightEdge);
    }

    // Tooltip is not in the gutter, so no need to shift it horizontally
    return 0;
}
//where leftBoundryPos is the value of the left edge which we found earlier
// i am using these variable name just for the proposal in the PR i will use meaningful names.

What alternative solutions did you explore? (Optional)

NA

https://github.com/Expensify/App/assets/20871387/beccd139-90ed-48c6-a9e4-ad210f44bcb4

[dragnoir]

The toolyip is rendered just inside the body tag (at the end) with a fixed position.

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

The overflow: hidden can't be applied to it.

[abekkala]

@shawnborton I know there have been some recent talks about tooltips in #product and #wave8. Does fixing the placement of this one require an external fix (and assigning to a specific wave)? Or, can we just do this internally?

[shawnborton]

Honestly, I think I would just close this one out. It's such an edge case. cc @Expensify/design in case they disagree.

[dannymcclain]

Totally agree. This doesn't seem like it's worth addressing to me.

[abekkala]

I agree, Closing

[nabhiraj]

hi :) , i have sent the mail to contributors@expensify.com with subject "Slack Channel Invites" but i am not getting a invite for #expensify-open-source in slack, can please someone add me to this channel. thanks. nabhinewton04@gmail.com

[wes-q]

Hi, I also sent mail to contributors@expensify.com multiple times already but I am not getting an invite too. Kindly add me: piuswesley@gmail.com

[melvin-bot[bot]]

📣 @iamwesofph! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[wes-q]

Contributor details Your Expensify account email: piuswesley@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~0129f08884f50d1176

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!