diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx index dd5fb625e507..29a05a5aed24 100644 --- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx +++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx @@ -193,6 +193,7 @@ function ExpenseReportListItem({ shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, + shouldApplyOtherStyles: !isLargeScreenWidth, }); const shouldShowViolationDescription = isOpenExpenseReport(reportItem) || isProcessingReport(reportItem); @@ -265,7 +266,12 @@ function ExpenseReportListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isPendingDelete && styles.cursorDisabled, isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius]} + pressableWrapperStyle={[ + styles.mh5, + animatedHighlightStyle, + isPendingDelete && styles.cursorDisabled, + isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], + ]} accessible={false} shouldShowRightCaret={false} shouldUseDefaultRightHandSideCheckmark={false} diff --git a/src/components/Search/SearchList/ListItem/TaskListItem.tsx b/src/components/Search/SearchList/ListItem/TaskListItem.tsx index e4b43812e733..520db5dc5bb6 100644 --- a/src/components/Search/SearchList/ListItem/TaskListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TaskListItem.tsx @@ -55,6 +55,7 @@ function TaskListItem({ shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, + shouldApplyOtherStyles: !isLargeScreenWidth, }); const fsClass = FS.getChatFSClass(parentReport); @@ -76,7 +77,7 @@ function TaskListItem({ onLongPressRow={onLongPressRow} shouldSyncFocus={shouldSyncFocus} hoverStyle={item.isSelected && styles.activeComponentBG} - pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius]} + pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]]} forwardedFSClass={fsClass} > - + ({ shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, + shouldApplyOtherStyles: !isLargeScreenWidth, }); const isItemSelected = isSelectAllChecked || item?.isSelected; @@ -534,6 +535,7 @@ function TransactionGroupListItem({ animatedHighlightStyle, styles.userSelectNone, isLargeScreenWidth && StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), + isLargeScreenWidth && isLastItem && styles.overflowHidden, ]} > {({hovered}) => ( diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx index 1e34b2f38adb..a05c9cd4e377 100644 --- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx +++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx @@ -122,6 +122,7 @@ function TransactionListItem({ shouldHighlight: item?.shouldAnimateInHighlight ?? false, highlightColor: theme.messageHighlightBG, backgroundColor: theme.highlightBG, + shouldApplyOtherStyles: !isLargeScreenWidth, }); const amountColumnSize = transactionItem.isAmountColumnWide ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL; @@ -211,7 +212,7 @@ function TransactionListItem({ styles.flex1, animatedHighlightStyle, styles.userSelectNone, - isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius, + isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden], ]} > {({hovered}) => ( diff --git a/src/components/Search/SearchList/index.tsx b/src/components/Search/SearchList/index.tsx index 391a1699a199..b32ceccf61a2 100644 --- a/src/components/Search/SearchList/index.tsx +++ b/src/components/Search/SearchList/index.tsx @@ -325,7 +325,7 @@ function SearchList({ }, [data, groupBy, newTransactions]); const {windowWidth} = useWindowDimensions(); - const minTableWidth = getTableMinWidth(columns); + const minTableWidth = getTableMinWidth(columns, queryJSON.type); const shouldScrollHorizontally = !!SearchTableHeader && minTableWidth > windowWidth; const horizontalScrollViewRef = useRef(null); diff --git a/src/components/Search/SearchTableHeader.tsx b/src/components/Search/SearchTableHeader.tsx index 51e7ebd54b86..0cdffe589a17 100644 --- a/src/components/Search/SearchTableHeader.tsx +++ b/src/components/Search/SearchTableHeader.tsx @@ -540,6 +540,7 @@ function SearchTableHeader({ sortBy={sortBy} sortOrder={sortOrder} shouldRemoveTotalColumnFlex={!!groupBy !== !!isExpenseReportView} + isActionColumnWide={type === CONST.SEARCH.DATA_TYPES.TASK} // Don't butt up against the 'select all' checkbox if present containerStyles={canSelectMultiple && [styles.pl3]} onSortPress={(columnName, order) => { diff --git a/src/components/Search/SortableTableHeader.tsx b/src/components/Search/SortableTableHeader.tsx index 60e1d7f45b02..a86a7e3e0a09 100644 --- a/src/components/Search/SortableTableHeader.tsx +++ b/src/components/Search/SortableTableHeader.tsx @@ -35,6 +35,7 @@ type SearchTableHeaderProps = { shouldShowColumn: (columnName: SearchColumnType) => boolean; onSortPress: (column: SearchColumnType, order: SortOrder) => void; shouldRemoveTotalColumnFlex?: boolean; + isActionColumnWide?: boolean; }; function SortableTableHeader({ @@ -54,6 +55,7 @@ function SortableTableHeader({ amountColumnSize, taxAmountColumnSize, shouldRemoveTotalColumnFlex, + isActionColumnWide, }: SearchTableHeaderProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -91,6 +93,7 @@ function SortableTableHeader({ isAmountColumnWide: amountColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE, shouldRemoveTotalColumnFlex, isWithdrawnColumnWide: withdrawnColumnSize === CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE, + isActionColumnWide, }), ]} isSortable={isSortable} diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index dcea7b7e6b72..30e6cb90055a 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -5130,7 +5130,7 @@ function getTransactionFromTransactionListItem(item: TransactionListItemType): O return transaction as OnyxTypes.Transaction; } -function getTableMinWidth(columns: SearchColumnType[]) { +function getTableMinWidth(columns: SearchColumnType[], type?: SearchDataTypes) { // Starts at 24px to account for the checkbox width let minWidth = 24; @@ -5144,7 +5144,7 @@ function getTableMinWidth(columns: SearchColumnType[]) { } else if (column === CONST.SEARCH.TABLE_COLUMNS.STATUS) { minWidth += 80; } else if (column === CONST.SEARCH.TABLE_COLUMNS.ACTION) { - minWidth += 68; + minWidth += type === CONST.SEARCH.DATA_TYPES.TASK ? 80 : 68; } else if (column === CONST.SEARCH.TABLE_COLUMNS.DATE) { minWidth += 48; } else if ( diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 2a60f3218a52..f381f4cd7af8 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -63,6 +63,7 @@ type GetReportTableColumnStylesParams = { isExportedColumnWide?: boolean; shouldRemoveTotalColumnFlex?: boolean; isWithdrawnColumnWide?: boolean; + isActionColumnWide?: boolean; }; const workspaceColorOptions: SVGAvatarColorStyle[] = LETTER_AVATAR_COLOR_OPTIONS.map(({backgroundColor, fillColor}) => ({backgroundColor, fill: fillColor})); @@ -1842,6 +1843,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ isAmountColumnWide, shouldRemoveTotalColumnFlex, isWithdrawnColumnWide, + isActionColumnWide, } = options; let columnWidth; @@ -1917,7 +1919,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ columnWidth = {...getWidthStyle(variables.w92), ...styles.flex1}; break; case CONST.SEARCH.TABLE_COLUMNS.ACTION: - columnWidth = {...getWidthStyle(variables.w68), ...styles.alignItemsCenter}; + columnWidth = {...getWidthStyle(isActionColumnWide ? variables.w80 : variables.w68), ...styles.alignItemsCenter}; break; case CONST.SEARCH.TABLE_COLUMNS.EXPORTED_TO: columnWidth = {...getWidthStyle(variables.w72), ...styles.alignItemsCenter};