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

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011542ccd37628748a

[melvin-bot]

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

[mkhutornyi]

@bernhardoj do you have example pdf file? I am not able to reproduce with my pdf.

[bernhardoj]

I use this PDF but any PDF should work

dummy.pdf

[melvin-bot]

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

[bernhardoj]

I've requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@mountiny, @muttmuure, @bernhardoj, @mkhutornyi Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mountiny]

$250 to @mkhutornyi still pending and we can close this I think

[melvin-bot]

@mountiny, @muttmuure, @bernhardoj, @mkhutornyi 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

@mountiny, @muttmuure, @bernhardoj, @mkhutornyi Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[melvin-bot]

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

[mountiny]

Matt is ooo so going to ask someone else for help paying out the $250 to @mkhutornyi, @bernhardoj has already been handled.

@greg-schroeder can you please help? Thanks!

[greg-schroeder]

Yeah sure, doing

[greg-schroeder]

@mkhutornyi paid via Upwork