[HOLD for payment 2024-09-11] ][$500] Lack of maximum height for the description field for room hides other options on the page

@JmillsExpensify

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.44-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: @JmillsExpensify
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1709046310280799

Action Performed:

Create a room in the workspace with lengthy description
Open the room and view the details of the room

Expected Result:

All the option in the details page should be visible restricting the max height of the description field

Actual Result:

Lack of a max height for the description field obscures other options

Workaround:

unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01b55a4d576f4c3f8a
Upwork Job ID: 1762602581669859328
Last Price Increase: 2024-03-26
Automatic offers:

shubham1206agra | Reviewer | 0
brandonhenry | Contributor | 0

Issue Owner

Current Issue Owner: @greg-schroeder

Job added to Upwork: https://www.upwork.com/jobs/~01b55a4d576f4c3f8a

@ishpaul777

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

@greg-schroeder

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

Proposal

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

Lack of maximum height for the description field for room hides other options on the page.

What is the root cause of that problem?

Here:

App/src/pages/ReportDetailsPage.tsx

Lines 245 to 253 in b447c11

    
           <MenuItemWithTopDescription 
        
               shouldShowRightIcon={canEditReportDescription} 
        
               interactive={canEditReportDescription} 
        
               title={report.description} 
        
               shouldRenderAsHTML 
        
               shouldCheckActionAllowedOnPress={false} 
        
               description={translate('reportDescriptionPage.roomDescription')} 
        
               onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID))} 
        
           />

We are rendering full description with shouldRenderAsHTML

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

we should remove shouldRenderAsHTML prop and add numberOfLinesTitle={4} prop with appropriate maximum number of lines.
We can use windowWidth to define dynamic maximum number of lines.

Proposal

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

For lengthy descriptions, other options go out of the screen.

What is the root cause of that problem?

There is no height limit or lines limit in the below code in MenuItem

{!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && (
                                                <View style={styles.renderHTMLTitle}>
                                                    <RenderHTML html={getProcessedTitle} />
                                                </View>
                                            )}

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

We can pass a prop from details page, which can be set as a max height limit in the above code to ensure that description height is limited.

It's not gonna be that easy guys :P
context #34150 (comment)
Seems we want a solve here for truncating html

Proposal

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

We want to limit the number of lines for html content

What is the root cause of that problem?

Our migration from #34150 (comment) is anticipating markdown support. A choice was made during PR to go with no max lines for this HTML we are rendering as we do not have this feature yet.

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

I think as we start supporting more markdown/html we need more tooling to parse over this.
We can leverage a library such as https://github.com/arendjr/text-clipper or implement our own to clip html

What alternative solutions did you explore? (Optional)

I also tried to solve it in a hackish way, setting a max height, overflowing, and adding ellipses with a pseudo element. It's ugly.

Proposal

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

There is no maximum line for the report description.

What is the root cause of that problem?

Simply we don't limit the maximum line. The report description is rendered with a RenderHTML component and there is no straightforward way to set the number of lines props to the text.

App/src/components/MenuItem.tsx

Lines 515 to 519 in 98461f9

    
           {!!title && (shouldRenderAsHTML || (shouldParseTitle && !!html.length)) && ( 
        
               <View style={styles.renderHTMLTitle}> 
        
                   <RenderHTML html={getProcessedTitle} /> 
        
               </View> 
        
           )}

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

One way is to wrap the description with a new custom tag that will have a custom renderer that can receive a number of lines attribute.

Create a new TextRenderer

function TextRenderer({TDefaultRenderer, textProps, ...props}) {
    return <TDefaultRenderer {...props} textProps={{...textProps, numberOfLines: props.tnode.attributes.line}} />
}

Register it to the custom renderer in HTMLRenderers/index.ts

text: TextRenderer,

and in BaseHTMLEngineProvider

text: HTMLElementModel.fromCustomModel({tagName: 'text', contentModel: HTMLContentModel.textual}),

In MenuItem, wrap the HTML with <text> tag.

return processedTitle ? `<comment><text line="${numberOfLinesTitle}">${processedTitle}</text></comment>` : '';

In ReportDetailsPage, pass numberOfLinesTitle with the agreed value

numberOfLinesTitle={3}

Why we can't create a custom renderer for <comment> tag? That's because comment is a block model, not textual which won't receive textProps

@brandonhenry

Payment summary:

Contributor: @brandonhenry - $500 - Offer sent via Upwork
C+: @shubham1206agra - $500 - Offer sent via Upwork

@greg-schroeder

@greg-schroeder I discussed with both Brandon and Shubham and re-checked the PRs. We had multiple scope increases, so I think we should update the payout to be $1250.

@greg-schroeder

@greg-schroeder @puneetlath thanks, let me know if I need to do anything here

Oh, word. All right - I didn't realize as the issue title still shows $500. I can update the offers.

@greg-schroeder

@greg-schroeder Bump here

Hmm - I updated it - did it not go through? I can try again

@shubham1206agra

Tried again. Modified offer for @shubham1206agra - added bonus payment for @brandonhenry

@greg-schroeder

@greg-schroeder I accepted the offer.

Navigation Menu

Repository navigation

[HOLD for payment 2024-09-11] ][$500] Lack of maximum height for the `description` field for room hides other options on the page #37357

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

161 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<MenuItemWithTopDescription
	shouldShowRightIcon={canEditReportDescription}
	interactive={canEditReportDescription}
	title={report.description}
	shouldRenderAsHTML
	shouldCheckActionAllowedOnPress={false}
	description={translate('reportDescriptionPage.roomDescription')}
	onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID))}
	/>

	{!!title && (shouldRenderAsHTML \|\| (shouldParseTitle && !!html.length)) && (
	<View style={styles.renderHTMLTitle}>
	<RenderHTML html={getProcessedTitle} />
	</View>
	)}

[HOLD for payment 2024-09-11] ][$500] Lack of maximum height for the description field for room hides other options on the page #37357

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 27, 2024

melvin-bot commented on Feb 27, 2024

melvin-bot commented on Feb 27, 2024

rayane-d commented on Feb 28, 2024

Proposal

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

What is the root cause of that problem?

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

ShridharGoel commented on Feb 28, 2024

Proposal

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

What is the root cause of that problem?

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

jeremy-croff commented on Feb 28, 2024

jeremy-croff commented on Feb 28, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

bernhardoj commented on Feb 28, 2024

Proposal

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

What is the root cause of that problem?

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

161 remaining items

greg-schroeder commented on Sep 11, 2024

puneetlath commented on Sep 11, 2024

brandonhenry commented on Sep 12, 2024

greg-schroeder commented on Sep 12, 2024

shubham1206agra commented on Sep 16, 2024

greg-schroeder commented on Sep 16, 2024

greg-schroeder commented on Sep 17, 2024

shubham1206agra commented on Sep 18, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[HOLD for payment 2024-09-11] ][$500] Lack of maximum height for the `description` field for room hides other options on the page #37357