Revert "Fix task title is overflown and align the checkbox and arrow correctly"

src/components/ReportActionItem/TaskPreview.tsx

@@ -1,7 +1,6 @@
 import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
-import type {StyleProp, ViewStyle} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import Avatar from '@components/Avatar';
@@ -12,7 +11,6 @@ import {usePersonalDetails} from '@components/OnyxProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import RenderHTML from '@components/RenderHTML';
 import {showContextMenuForReport} from '@components/ShowContextMenuContext';
-import Text from '@components/Text';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
@@ -55,12 +53,9 @@ type TaskPreviewProps = WithCurrentUserPersonalDetailsProps & {
 
     /** Callback for updating context menu active state, used for showing context menu */
     checkIfContextMenuActive: () => void;
-
-    /** Style for the task preview container */
-    style: StyleProp<ViewStyle>;
 };
 
-function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false, style}: TaskPreviewProps) {
+function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, checkIfContextMenuActive, currentUserPersonalDetails, isHovered = false}: TaskPreviewProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
@@ -75,33 +70,29 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
         : action?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && action?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED;
     const taskTitle = Str.htmlEncode(TaskUtils.getTaskTitle(taskReportID, action?.childReportName ?? ''));
     const taskAssigneeAccountID = Task.getTaskAssigneeAccountID(taskReport) ?? action?.childManagerAccountID ?? -1;
-    const hasAssignee = taskAssigneeAccountID > 0;
     const personalDetails = usePersonalDetails();
     const avatar = personalDetails?.[taskAssigneeAccountID]?.avatar ?? Expensicons.FallbackAvatar;
-    const avatarSize = CONST.AVATAR_SIZE.SMALL;
+    const htmlForTaskPreview = `<comment>${taskTitle}</comment>`;
     const isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action);
-    const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined);
-    const titleStyle = StyleUtils.getTaskPreviewTitleStyle(iconWrapperStyle.height, isTaskCompleted);
-
     const shouldShowGreenDotIndicator = ReportUtils.isOpenTaskReport(taskReport, action) && ReportUtils.isReportManager(taskReport);
     if (isDeletedParentAction) {
         return <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />;
     }
 
     return (
-        <View style={[styles.chatItemMessage, !hasAssignee && styles.mv1]}>
+        <View style={[styles.chatItemMessage]}>
             <PressableWithoutFeedback
                 onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))}
                 onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                 onPressOut={() => ControlSelection.unblock()}
                 onLongPress={(event) => showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive)}
                 shouldUseHapticsOnLongPress
-                style={[styles.flexRow, styles.justifyContentBetween, style]}
+                style={[styles.flexRow, styles.justifyContentBetween]}
                 role={CONST.ROLE.BUTTON}
                 accessibilityLabel={translate('task.task')}
             >
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mr2]}>
-                    <View style={iconWrapperStyle}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsStart, styles.mt1]}>
+                    <View style={[styles.taskCheckboxWrapper, styles.alignSelfCenter]}>
                         <Checkbox
                             style={[styles.mr2]}
                             isChecked={isTaskCompleted}
@@ -116,16 +107,18 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
                             accessibilityLabel={translate('task.task')}
                         />
                     </View>
-                    {hasAssignee && (
+                    {taskAssigneeAccountID > 0 && (
                         <Avatar
-                            containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
+                            containerStyles={[styles.mr2, styles.alignSelfCenter, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                             source={avatar}
-                            size={avatarSize}
+                            size={CONST.AVATAR_SIZE.SMALL}
                             avatarID={taskAssigneeAccountID}
                             type={CONST.ICON_TYPE_AVATAR}
                         />
                     )}
-                    <Text style={titleStyle}>{taskTitle}</Text>
+                    <View style={[styles.alignSelfCenter]}>
+                        <RenderHTML html={isTaskCompleted ? `<completed-task>${htmlForTaskPreview}</completed-task>` : htmlForTaskPreview} />
+                    </View>
                 </View>
                 {shouldShowGreenDotIndicator && (
                     <View style={styles.ml2}>
@@ -138,7 +131,6 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
                 <Icon
                     src={Expensicons.ArrowRight}
                     fill={StyleUtils.getIconFillColor(getButtonState(isHovered))}
-                    additionalStyles={iconWrapperStyle}
                 />
             </PressableWithoutFeedback>
         </View>

src/pages/home/report/ReportActionItem.tsx

@@ -572,7 +572,6 @@ function ReportActionItem({
             children = (
                 <ShowContextMenuContext.Provider value={contextValue}>
                     <TaskPreview
-                        style={displayAsGroup ? [] : [styles.mt1]}
                         taskReportID={ReportActionsUtils.isAddCommentAction(action) ? ReportActionsUtils.getOriginalMessage(action)?.taskReportID?.toString() ?? '-1' : '-1'}
                         chatReportID={reportID}
                         action={action}

src/styles/index.ts

@@ -4151,6 +4151,11 @@ const styles = (theme: ThemeColors) =>
             width: 1,
         },
 
+        taskCheckboxWrapper: {
+            height: variables.fontSizeNormalHeight,
+            ...flex.justifyContentCenter,
+        },
+
         taskTitleMenuItem: {
             ...writingDirection.ltr,
             ...headlineFont,

src/styles/utils/index.ts

@@ -1667,17 +1667,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         alignItems: 'center',
         justifyContent: 'center',
     }),
-
-    getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => ({
-        height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight,
-        ...styles.justifyContentCenter,
-    }),
-
-    getTaskPreviewTitleStyle: (iconHeight: number, isTaskCompleted: boolean): StyleProp<TextStyle> => [
-        styles.flex1,
-        isTaskCompleted ? [styles.textSupporting, styles.textLineThrough] : [],
-        {marginTop: (iconHeight - variables.fontSizeNormalHeight) / 2},
-    ],
 });
 
 type StyleUtilsType = ReturnType<typeof createStyleUtils>;