[HOLD for payment 2024-10-16] [HOLD for payment 2024-10-14] [HOLD for payment 2024-10-11] [$250] Task - Long Task title is overlapped by task arrow

[IuliiaHerets]

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: 9.0.33-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/4955214&group_by=cases:section_id&group_order=asc&group_id=291935
Email or phone of affected tester (no customers): gocemate+a2096@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to Group chat> +> Assign Task
2. In title field enter long text> Finish the flow
3. Take a look at Task title in Group chat

Expected Result:

Task title should not be overlapped by arrow

Actual Result:

Task title is overlapped by task arrow

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6600811_1726147239222.Recording__3921.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834296909071158877
• Upwork Job ID: 1834296909071158877
• Last Price Increase: 2024-09-19
• Automatic offers:
• rayane-djouah | Reviewer | 104113003

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

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

[IuliiaHerets]

@Christinadobrzyn 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

[Krishna2323]

Proposal


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

Task - Long Task title is overlapped by task arrow

What is the root cause of that problem?

styles.flex1 is not added to the container of RenderHTML.

App/src/components/ReportActionItem/TaskPreview.tsx

Lines 122 to 124 in 65a21fc

	<View style={[styles.alignSelfCenter]}>
	<RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
	</View>

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


Add styles.flex1 to the container of RenderHTML.

OPTIONAL: Also add styles.flexRow, styles.alignItemsCenter, styles.breakWord, styles.preWrap & styles.renderHTML if needed.

OPTIONAL 2: We can move the ArrowRight in this container and wrap it with a view and also apply styles.alignSelfCenter to the view to centre the icon.

What alternative solutions did you explore? (Optional)

Result

[ChavdaSachin]

Edited by proposal-police: This proposal was edited at 2024-09-12 14:13:45 UTC.

Proposal

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

Task - Long Task title is overlapped by task arrow

What is the root cause of that problem?

• styles.flex1 is missing from RenderHTML container. And icon is not justifiedCenter.
  

  App/src/components/ReportActionItem/TaskPreview.tsx

  Lines 97 to 129 in 4c424a2

  	<View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mt1]}>
  	<View style={[styles.taskCheckboxWrapper, styles.alignSelfCenter]}>
  	<Checkbox
  	style={[styles.mr2]}
  	isChecked={isTaskCompleted}
  	disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID)}
  	onPress={Session.checkIfActionIsAllowed(() => {
  	if (isTaskCompleted) {
  	Task.reopenTask(taskReport);
  	} else {
  	Task.completeTask(taskReport);
  	}
  	})}
  	accessibilityLabel={translate('task.task')}
  	/>
  	</View>
  	{taskAssigneeAccountID > 0 && (
  	<Avatar
  	containerStyles={[styles.mr2, styles.alignSelfCenter, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
  	source={avatar}
  	size={CONST.AVATAR_SIZE.SMALL}
  	avatarID={taskAssigneeAccountID}
  	type={CONST.ICON_TYPE_AVATAR}
  	/>
  	)}
  	<View style={[styles.alignSelfCenter]}>
  	<RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
  	</View>
  	</View>
  	<Icon
  	src={Expensicons.ArrowRight}
  	fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
  	/>

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

• following code perfectly aligns with the expectations

    <View style={[styles.flex1, styles.flexRow, styles.mt1]}>
        <View style={[styles.taskCheckboxWrapper,taskAssigneeAccountID > 0 && styles.mt1]}>
            <Checkbox
                style={[styles.mr2, styles.alignSelfEnd]}
                isChecked={isTaskCompleted}
                disabled={!Task.canModifyTask(taskReport, currentUserPersonalDetails.accountID) || !Task.canActionTask(taskReport, currentUserPersonalDetails.accountID)}
                onPress={Session.checkIfActionIsAllowed(() => {
                    if (isTaskCompleted) {
                        Task.reopenTask(taskReport);
                    } else {
                        Task.completeTask(taskReport);
                    }
                })}
                accessibilityLabel={translate('task.task')}
            />
        </View>
        {taskAssigneeAccountID > 0 && (
            <Avatar
                containerStyles={[styles.mr2,styles.alignSelfStart, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                source={avatar}
                size={CONST.AVATAR_SIZE.SMALL}
                avatarID={taskAssigneeAccountID}
                type={CONST.ICON_TYPE_AVATAR}
            />
        )}
        <View style={[taskAssigneeAccountID > 0 ? styles.alignSelfStart:styles.alignSelfCenter, styles.flex1 ]}>
            <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
        </View>
        <Icon
            additionalStyles={[styles.alignSelfStart,taskAssigneeAccountID > 0 && styles.mt1]}
            src={Expensicons.ArrowRight}
            fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
        />
    </View>

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

Proposal Updated

• Added optional 2

[melvin-bot]

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

[melvin-bot]

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