diff --git a/src/components/ReportActionItem/ReportActionItemImages.tsx b/src/components/ReportActionItem/ReportActionItemImages.tsx index ffc12957dcb4..c66dc36d1ed5 100644 --- a/src/components/ReportActionItem/ReportActionItemImages.tsx +++ b/src/components/ReportActionItem/ReportActionItemImages.tsx @@ -63,45 +63,45 @@ function ReportActionItemImages({images, size, total, isHovered = false}: Report const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth; return ( - - {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => { - const isLastImage = index === numberOfShownImages - 1; - - // Show a border to separate multiple images. Shown to the right for each except the last. - const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1; - const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; - return ( - + + {shownImages.map(({thumbnail, image, transaction, isLocalFile, filename}, index) => { + // Show a border to separate multiple images. Shown to the right for each except the last. + const shouldShowBorder = shownImages.length > 1 && index < shownImages.length - 1; + const borderStyle = shouldShowBorder ? styles.reportActionItemImageBorder : {}; + return ( + + + + ); + })} + + {remaining > 0 && ( + + + - - {isLastImage && remaining > 0 && ( - - - - - - {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} - - )} - - ); - })} + + {remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`} + + )} ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 8a65cabaf19f..7c3f488e5eb1 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -4099,9 +4099,12 @@ const styles = (theme: ThemeColors) => gap: 16, }, + reportActionItemImagesContainer: { + margin: 4, + }, + reportActionItemImages: { flexDirection: 'row', - margin: 4, borderRadius: 12, overflow: 'hidden', height: variables.reportActionImagesSingleImageHeight,