From 7087eaae388b5ab62be2dbcfabbafebb01ec69d9 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 26 Sep 2024 11:28:38 +0800
Subject: [PATCH] achieve same height with margin

---
 src/components/ReportActionItem/TaskPreview.tsx | 7 ++++---
 src/styles/utils/index.ts                       | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/ReportActionItem/TaskPreview.tsx b/src/components/ReportActionItem/TaskPreview.tsx
index 00b02f6ec522..6324ebeb627d 100644
--- a/src/components/ReportActionItem/TaskPreview.tsx
+++ b/src/components/ReportActionItem/TaskPreview.tsx
@@ -72,18 +72,19 @@ 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 isDeletedParentAction = ReportUtils.isCanceledTaskReport(taskReport, action);
-    const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(avatarSize);
+    const iconWrapperStyle = StyleUtils.getTaskPreviewIconWrapper(hasAssignee ? avatarSize : undefined);
 
     if (isDeletedParentAction) {
         return <RenderHTML html={`<comment>${translate('parentReportAction.deletedTask')}</comment>`} />;
     }
 
     return (
-        <View style={[styles.chatItemMessage]}>
+        <View style={[styles.chatItemMessage, !hasAssignee && styles.mv1]}>
             <PressableWithoutFeedback
                 onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(taskReportID))}
                 onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
@@ -110,7 +111,7 @@ function TaskPreview({taskReportID, action, contextMenuAnchor, chatReportID, che
                             accessibilityLabel={translate('task.task')}
                         />
                     </View>
-                    {taskAssigneeAccountID > 0 && (
+                    {hasAssignee && (
                         <Avatar
                             containerStyles={[styles.mr2, isTaskCompleted ? styles.opacitySemiTransparent : undefined]}
                             source={avatar}
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 6d398e37f5d7..19feb9a0b81d 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1669,9 +1669,9 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         justifyContent: 'center',
     }),
 
-    getTaskPreviewIconWrapper: (avatarSize: AvatarSizeName) => {
+    getTaskPreviewIconWrapper: (avatarSize?: AvatarSizeName) => {
         return {
-            height: getAvatarSize(avatarSize),
+            height: avatarSize ? getAvatarSize(avatarSize) : variables.fontSizeNormalHeight,
             ...styles.justifyContentCenter,
         };
     },