[HOLD for payment 2024-08-09] [$250] mWeb - Chat - smaller file preview when opening PDF attachment

[kbecciv]

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: v1.4.75-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4569525
Issue reported by: Applause - Internal Team

Action Performed:

1. Log in to New Expensify
2. Navigate to any chat
3. Upload a PDF attachment
4. Open the PDF attachment

Expected Result:

Attachment preview should be of the usual height.

Actual Result:

Preview of the opened attachment is much smaller in height in comparison to the other PDFs in conversation.
Issue is reproducible 8 out of 10 times.

Workaround:

n/a

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6489933_1716500883851.Record_2024-05-23-18-15-32.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011542ccd37628748a
• Upwork Job ID: 1800587084111022941
• Last Price Increase: 2024-08-08
• Automatic offers:
• mkhutornyi | Reviewer | 102885617
• bernhardoj | Contributor | 102885619

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

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

[kbecciv]

@muttmuure FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[kbecciv]

We think that this bug might be related to #vip-vsb

[bernhardoj]

Proposal

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

The PDF has a smaller height. This happens when we open the PDF while a keyboard is shown.

What is the root cause of that problem?

The PDF container height is set based on the div height as can be seen in this code.

It's set in a useLayoutEffect and only happens once. When a keyboard is shown, the whole page height is reduced and if the calculation is happening while the keyboard isn't fully closed yet, the height it will receive is the reduced height, thus the PDF has a smaller height.

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

Instead of getting the height once, we should get the height whenever the div height is updated. We can use ResizeObserver for that.

const resizeObserver = new ResizeObserver(() => {
    if (!containerRef.current) {
        return;
    }
    setContainerWidth(containerRef.current.clientWidth);
    setContainerHeight(containerRef.current.clientHeight);
});
resizeObserver.observe(containerRef.current);

return () => {
    resizeObserver.disconnect();
}

We can optionally debounce it to optimize if we want.

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@muttmuure Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@muttmuure Still overdue 6 days?! Let's take care of this!

[melvin-bot]

@muttmuure 10 days overdue. I'm getting more depressed than Marvin.

[muttmuure]

Catching up from OOO

[melvin-bot]

@muttmuure this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!