[HOLD for payment 2024-06-06] [$500] Empty state image has too much overlap with message in attachment thread

[m-natarajan]

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.38-2
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: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1707401686727289

Action Performed:

1. Send a message with a vertical (portrait) image. Then create a thread on this image and view the thread.

Expected Result:

The empty state image/background pattern should not have so much overlap with the message.

Actual Result:

The empty state pattern has a LOT of overlap with the message, almost sitting directly behind it.

Workaround:

unknown

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

With vertical tall image

with normal image

without image

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0180e51b2d8c0c04ec
• Upwork Job ID: 1755638484200894464
• Last Price Increase: 2024-04-24
• Automatic offers:
• cubuspl42 | Reviewer | 0
• rayane-djouah | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0180e51b2d8c0c04ec

[melvin-bot]

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

[melvin-bot]

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

[rayane-d]

@shawnborton could you please share mockups of the expected result ?

[neonbhai]

Proposal

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

Empty state image has too much overlap with message in attachment thread

What is the root cause of that problem?

This happens as we have and incorrect style justifyContentEnd here:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 74 in e309896

<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), styles.justifyContentEnd]}>

This makes the AnimatedEmptyStateBackground image appear behind the content.

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

We should move the styles.justifyContentEnd from this View to the View just after AnimatedEmptyStateBackground:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 76 in e309896

<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

Result:

Before

Screen.Recording.2024-02-09.at.12.03.48.AM.mov

After

[shawnborton]

@rayane-djouah shared a rough mockup for you here

[rayane-d]

Proposal

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

The empty state image is excessively overlapping with the message within the attachment thread

What is the root cause of that problem?

We are applying an incorrect styling attribute, specifically justifyContentEnd, within the following component:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 74 in 43e81a1

<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), styles.justifyContentEnd]}>

This particular styling causes the AnimatedEmptyStateBackground image to be positioned behind the thread content, leading to the overlap issue.

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

we should remove , styles.justifyContentEnd here:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 74 in 43e81a1

<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), styles.justifyContentEnd]}>

Result:

But a lot of overlap is still applied because the report message top margin value here is not enough:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 76 in 43e81a1

<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

after removing the justifyContentEnd style, an overlap of 135px is still applied.
the report first item top margin value is here:

App/src/CONST.ts

Line 153 in 176675b

VIEW_HEIGHT: 275,

we are also applying a padding here that adds 40px:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 76 in 43e81a1

<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

the background image size is 450px here :

App/src/CONST.ts

Line 151 in 176675b

IMAGE_HEIGHT: 450,

overlap value = 450px - (275px + 40px) = 135px

To move the background image a little to the top and use a 60px overlap in all chat reports views,
we should modify VIEW_HEIGHT here to use 240px for small screens and 390px for wide screens.

        SMALL_SCREEN: {
            IMAGE_HEIGHT: 300,
            CONTAINER_MINHEIGHT: 200,
            VIEW_HEIGHT: 240,
        },
        WIDE_SCREEN: {
            IMAGE_HEIGHT: 450,
            CONTAINER_MINHEIGHT: 500,
            VIEW_HEIGHT: 390,
        },
        MONEY_OR_TASK_REPORT: {
            SMALL_SCREEN: {
                IMAGE_HEIGHT: 300,
                CONTAINER_MINHEIGHT: 280,
                VIEW_HEIGHT: 240,
            },
            WIDE_SCREEN: {
                IMAGE_HEIGHT: 450,
                CONTAINER_MINHEIGHT: 280,
                VIEW_HEIGHT: 390,
            },
        },

The formula for choosing VIEW_HEIGHT is (after removing the 40px padding in thread screen):
for WIDE_SCREEN:
overlap between the report message and the background image= 450px background image height - VIEW_HEIGHT value
for SMALL_SCREEN:
overlap between the report message and the background image= 300px background image height - VIEW_HEIGHT value

the above values (240 and 390) gives 60px overlap.

we should get the exact overlap value from the design team.

I asked the design team here for the overlap value, and they fixed a value of 60px for both wide and small screens.

and here:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 76 in 43e81a1

<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

remove styles.p5 that we don't need (it adds 40px padding that get added as a top margin to the message).

<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

Result with VIEW_HEIGHT: 390 for wide screens:

Result for wide screens:

Dimensions details

AnimatedEmptyStateBackground image size:

report message top margin view size:

Result for small screens:

Dimensions details

AnimatedEmptyStateBackground image size:

report message top margin view size:

What alternative solutions did you explore? (Optional)

If we want to use a 60px overlap value in the thread screen only and keep 135px in other screens, we can do the following:

we should add here this code to make the change only for thread reports:

        THREAD_REPORT: {
          SMALL_SCREEN: {
              IMAGE_HEIGHT: 300,
              CONTAINER_MINHEIGHT: 200,
              VIEW_HEIGHT: 240,  //ajust the view height value here
          },
          WIDE_SCREEN: {
              IMAGE_HEIGHT: 450,
              CONTAINER_MINHEIGHT: 500,
              VIEW_HEIGHT: 390, //ajust the view height value here
          },
        },

and here:

App/src/styles/utils/index.ts

Lines 724 to 725 in 43e81a1

	function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean, isMoneyOrTaskReport = false): ViewStyle {
	const emptyStateBackground = isMoneyOrTaskReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_OR_TASK_REPORT : CONST.EMPTY_STATE_BACKGROUND;

add isThreadReport :

function getReportWelcomeTopMarginStyle(isSmallScreenWidth: boolean, isMoneyOrTaskReport = false, isThreadReport = false): ViewStyle {
    let emptyStateBackground;
    if (isMoneyOrTaskReport) {
        emptyStateBackground = CONST.EMPTY_STATE_BACKGROUND.MONEY_OR_TASK_REPORT;
    }
    else if (isThreadReport) {
        emptyStateBackground = CONST.EMPTY_STATE_BACKGROUND.THREAD_REPORT;
    }
    else {
        emptyStateBackground = CONST.EMPTY_STATE_BACKGROUND;
    }
// rest remains the same

and here:

App/src/pages/home/report/ReportActionItemParentAction.tsx

Line 76 in 43e81a1

<View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]} />

pass true for isThreadReport and remove styles.p5 that we don't need (it adds 40px padding that get added as a top margin to the message).

<View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, false, true)]} />

[jakub-trzebiatowski]

@shawnborton Does this require any extra approval, as it's a user-observable change? Or is your approval enough?