From cb7abcb503827fcedc4694159a2bd64183e780ea Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 09:48:40 -0400
Subject: [PATCH 01/43] add a table row component

---
 src/components/Table/TableRow.tsx | 5 +++++
 src/components/Table/index.tsx    | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 src/components/Table/TableRow.tsx

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
new file mode 100644
index 000000000000..666d125fdd19
--- /dev/null
+++ b/src/components/Table/TableRow.tsx
@@ -0,0 +1,5 @@
+type TableRowProps = {};
+
+export default function TableRow({}: TableRowProps) {
+    return <></>;
+}
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 91549f2c2cf7..177d177284ce 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -39,6 +39,7 @@ import TableBody from './TableBody';
 import TableContext from './TableContext';
 import TableFilterButtons from './TableFilterButtons';
 import TableHeader from './TableHeader';
+import TableRow from './TableRow';
 import TableSearchBar from './TableSearchBar';
 
 /**
@@ -66,6 +67,9 @@ const Table = Object.assign(TableComponent, {
 
     /** Renders a search input. */
     SearchBar: TableSearchBar,
+
+    /** Renders a row in the table */
+    Row: TableRow,
 });
 
 export default Table;

From 2c7819d7a7901f2386118b0894d238f448097109 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 09:56:24 -0400
Subject: [PATCH 02/43] update table header

---
 .../MoneyRequestReportTransactionItem.tsx        |  2 +-
 .../MoneyRequestReportTransactionList.tsx        |  4 ++--
 .../ListItem/ExpenseReportListItem.tsx           | 10 +++++-----
 .../Search/SearchList/ListItem/TaskListItem.tsx  |  2 +-
 .../ListItem/TransactionGroupListItem.tsx        |  6 +++---
 .../SearchList/ListItem/TransactionListItem.tsx  | 16 ++++++++--------
 src/components/Search/SearchStaticList.tsx       | 13 +++----------
 src/components/Skeletons/SearchRowSkeleton.tsx   |  4 ++--
 src/components/Table/TableHeader.tsx             |  6 ++++--
 .../MergeTransactionsListContent.tsx             |  4 ++--
 src/styles/index.ts                              |  4 ++--
 src/styles/utils/index.ts                        |  6 +++---
 12 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
index 04c00b51e9b6..418baa4f696c 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionItem.tsx
@@ -133,7 +133,7 @@ function MoneyRequestReportTransactionItem({
     return (
         <OfflineWithFeedback
             pendingAction={pendingAction}
-            style={!shouldUseNarrowLayout && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]}
+            style={!shouldUseNarrowLayout && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]}
         >
             <PressableWithFeedback
                 key={transaction.transactionID}
diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
index 8dfc916928d6..497095fe1589 100644
--- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
+++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
@@ -626,7 +626,7 @@ function MoneyRequestReportTransactionList({
           })
         : resolvedTransactions.map((transaction) => renderTransactionItem(transaction));
 
-    const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.overflowHidden] : undefined;
+    const narrowListWrapper = shouldUseNarrowLayout ? [styles.highlightBG, styles.tableTopRadius, styles.tableBottomRadius, styles.overflowHidden] : undefined;
 
     const transactionListContent = (
         <View
@@ -656,7 +656,7 @@ function MoneyRequestReportTransactionList({
                     !isDesktopTableLayout && styles.pl5,
                     isDesktopTableLayout ? styles.pr11 : styles.pr16,
                     styles.alignItemsCenter,
-                    isDesktopTableLayout && [styles.highlightBG, styles.searchTableTopRadius, styles.mh5],
+                    isDesktopTableLayout && [styles.highlightBG, styles.tableTopRadius, styles.mh5],
                     StyleUtils.getSelectedBorderBottomStyle(selectedTransactionIDs.length > 0),
                 ]}
             >
diff --git a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx
index 2b16aaf92690..6a2f74688537 100644
--- a/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx
+++ b/src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx
@@ -186,8 +186,8 @@ function ExpenseReportListItem<TItem extends ListItem>({
             styles.mh0,
             isPendingDelete && styles.cursorDisabled,
             isLargeScreenWidth ? StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected, {vertical: variables.tableRowPaddingVertical}) : styles.noBorderRadius,
-            !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
-            !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
+            !isLargeScreenWidth && isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
+            !isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
         ],
         [styles, item.isSelected, isLargeScreenWidth, isFirstItem, isLastItem, isPendingDelete, StyleUtils],
     );
@@ -286,9 +286,9 @@ function ExpenseReportListItem<TItem extends ListItem>({
                 styles.mh5,
                 animatedHighlightStyle,
                 isPendingDelete && styles.cursorDisabled,
-                isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
-                !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
-                !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
+                isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
+                !isLargeScreenWidth && isFirstItem && styles.tableTopRadius,
+                !isLargeScreenWidth && isLastItem && styles.tableBottomRadius,
                 !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
             ]}
             accessible={false}
diff --git a/src/components/Search/SearchList/ListItem/TaskListItem.tsx b/src/components/Search/SearchList/ListItem/TaskListItem.tsx
index ff2350e96079..a9e1757683f7 100644
--- a/src/components/Search/SearchList/ListItem/TaskListItem.tsx
+++ b/src/components/Search/SearchList/ListItem/TaskListItem.tsx
@@ -81,7 +81,7 @@ function TaskListItem<TItem extends ListItem>({
             onLongPressRow={onLongPressRow}
             shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
-            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]]}
+            pressableWrapperStyle={[styles.mh5, animatedHighlightStyle, isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
             forwardedFSClass={fsClass}
         >
             <TaskListItemRow
diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
index af7cdee1b396..a5bddfd03f8a 100644
--- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
@@ -213,7 +213,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
             ...styles.searchTableRowHeight,
             borderRadius: 0,
             paddingVertical: variables.tableGroupRowPaddingVertical,
-            ...(isLastItem ? styles.searchTableBottomRadius : {}),
+            ...(isLastItem ? styles.tableBottomRadius : {}),
         },
         isItemSelected && styles.activeComponentBG,
     ];
@@ -543,8 +543,8 @@ function TransactionGroupListItem<TItem extends ListItem>({
                     isLargeScreenWidth
                         ? [StyleUtils.getSearchTableGroupRowBorderStyle(isFirstItem, isLastItem, isItemSelected), isLastItem && styles.overflowHidden]
                         : [
-                              isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
-                              isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
+                              isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
+                              isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
                               !isLastItem && StyleUtils.getSelectedBorderBottomStyle(isItemSelected),
                           ],
                 ]}
diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx
index 08bf8329fe52..31b06adc8899 100644
--- a/src/components/Search/SearchList/ListItem/TransactionListItem.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionListItem.tsx
@@ -121,9 +121,9 @@ function TransactionListItem<TItem extends ListItem>({
                   ...StyleUtils.getSearchTableRowPressableStyle(!!isLastItem, item.isSelected),
               }
             : {...styles.flexColumn, ...styles.alignItemsStretch},
-        isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
-        !isLargeScreenWidth && isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
-        !isLargeScreenWidth && isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
+        isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
+        !isLargeScreenWidth && isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
+        !isLargeScreenWidth && isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
     ];
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
@@ -223,9 +223,9 @@ function TransactionListItem<TItem extends ListItem>({
                     styles.flex1,
                     animatedHighlightStyle,
                     styles.userSelectNone,
-                    isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
-                    !isLargeScreenWidth && isFirstItem && styles.searchTableTopRadius,
-                    !isLargeScreenWidth && isLastItem && styles.searchTableBottomRadius,
+                    isLargeScreenWidth && isLastItem && styles.tableBottomRadius,
+                    !isLargeScreenWidth && isFirstItem && styles.tableTopRadius,
+                    !isLargeScreenWidth && isLastItem && styles.tableBottomRadius,
                     !isLargeScreenWidth && !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
                 ]}
             >
@@ -266,8 +266,8 @@ function TransactionListItem<TItem extends ListItem>({
                             style={[
                                 styles.p3,
                                 styles.pv2,
-                                !isLargeScreenWidth && [styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius],
-                                isLargeScreenWidth && (isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius),
+                                !isLargeScreenWidth && [styles.p0, styles.pt3, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius],
+                                isLargeScreenWidth && (isLastItem ? styles.tableBottomRadius : styles.noBorderRadius),
                             ]}
                             violations={transactionViolations}
                             onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
diff --git a/src/components/Search/SearchStaticList.tsx b/src/components/Search/SearchStaticList.tsx
index 31f55779d711..cb82c76c880f 100644
--- a/src/components/Search/SearchStaticList.tsx
+++ b/src/components/Search/SearchStaticList.tsx
@@ -180,8 +180,8 @@ function SearchStaticList({
                         styles.flex1,
                         styles.userSelectNone,
                         {backgroundColor: theme.highlightBG},
-                        isFirstItem && styles.searchTableTopRadius,
-                        isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
+                        isFirstItem && styles.tableTopRadius,
+                        isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
                         !isLastItem && styles.borderBottom,
                     ]}
                 >
@@ -239,14 +239,7 @@ function SearchStaticList({
 
         return (
             <View
-                style={[
-                    styles.mh5,
-                    styles.flex1,
-                    {backgroundColor: theme.highlightBG},
-                    styles.userSelectNone,
-                    isLastItem && styles.searchTableBottomRadius,
-                    isLastItem && styles.overflowHidden,
-                ]}
+                style={[styles.mh5, styles.flex1, {backgroundColor: theme.highlightBG}, styles.userSelectNone, isLastItem && styles.tableBottomRadius, isLastItem && styles.overflowHidden]}
             >
                 <PressableWithoutFeedback
                     sentryLabel="SearchStaticList-wide-item"
diff --git a/src/components/Skeletons/SearchRowSkeleton.tsx b/src/components/Skeletons/SearchRowSkeleton.tsx
index 1c891292a9d1..d424c37c800d 100644
--- a/src/components/Skeletons/SearchRowSkeleton.tsx
+++ b/src/components/Skeletons/SearchRowSkeleton.tsx
@@ -70,7 +70,7 @@ function SearchRowSkeleton({
                     itemViewHeight={100}
                     itemViewStyle={[styles.highlightBG, styles.mr0]}
                     itemContainerStyle={styles.borderBottom}
-                    style={[styles.mh5, styles.overflowHidden, isLoadMore && styles.searchTableBottomRadius, !isLoadMore && styles.searchTableTopRadius]}
+                    style={[styles.mh5, styles.overflowHidden, isLoadMore && styles.tableBottomRadius, !isLoadMore && styles.tableTopRadius]}
                     gradientOpacityEnabled={gradientOpacityEnabled}
                     shouldAnimate={shouldAnimate}
                     onLayout={onLayout}
@@ -136,7 +136,7 @@ function SearchRowSkeleton({
                 itemViewStyle={[styles.highlightBG, styles.mr0]}
                 itemViewHeight={variables.tableRowHeight}
                 itemContainerStyle={styles.borderBottom}
-                style={[styles.mh5, styles.overflowHidden, isLoadMore && styles.searchTableBottomRadius, !isLoadMore && styles.searchTableTopRadius]}
+                style={[styles.mh5, styles.overflowHidden, isLoadMore && styles.tableBottomRadius, !isLoadMore && styles.tableTopRadius]}
                 renderSkeletonItem={() => (
                     <>
                         <SkeletonRect
diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index ec7754e8cc72..c5308729b37b 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -60,9 +60,11 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
     return (
         <View
             style={[
-                styles.appBG,
+                styles.highlightBG,
                 styles.mh5,
-                styles.p4,
+                styles.p3,
+                styles.borderBottom,
+                styles.tableTopRadius,
                 // Flexbox fallback for browsers / native devices wider than 1024px which don't support grid
                 styles.dFlex,
                 styles.flexRow,
diff --git a/src/pages/TransactionMerge/MergeTransactionsListContent.tsx b/src/pages/TransactionMerge/MergeTransactionsListContent.tsx
index ef2d7fafaea8..8e9831a406ae 100644
--- a/src/pages/TransactionMerge/MergeTransactionsListContent.tsx
+++ b/src/pages/TransactionMerge/MergeTransactionsListContent.tsx
@@ -213,8 +213,8 @@ function MergeTransactionsListContent({transactionID, mergeTransaction}: MergeTr
             textInputOptions={textInputOptions}
             shouldShowTextInput={shouldShowTextInput}
             style={{
-                listStyle: [styles.mh5, styles.searchTableTopRadius, styles.searchTableBottomRadius, styles.mb4, styles.overflowHidden],
-                contentContainerStyle: [styles.pb0, styles.searchTableBottomRadius, styles.overflowHidden],
+                listStyle: [styles.mh5, styles.tableTopRadius, styles.tableBottomRadius, styles.mb4, styles.overflowHidden],
+                contentContainerStyle: [styles.pb0, styles.tableBottomRadius, styles.overflowHidden],
             }}
         />
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 9f54c2ed1efb..86d8640e7f88 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2523,12 +2523,12 @@ const staticStyles = (theme: ThemeColors) =>
             borderBottomRightRadius: variables.componentBorderRadiusNormal,
         },
 
-        searchTableTopRadius: {
+        tableTopRadius: {
             borderTopLeftRadius: variables.componentBorderRadius,
             borderTopRightRadius: variables.componentBorderRadius,
         },
 
-        searchTableBottomRadius: {
+        tableBottomRadius: {
             borderBottomLeftRadius: variables.componentBorderRadius,
             borderBottomRightRadius: variables.componentBorderRadius,
         },
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index 8556779da9a5..7babc7aad9e0 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1822,14 +1822,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         borderRadius: 0,
         borderBottomWidth: isLastItem ? 0 : 1,
         borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
-        ...(isLastItem ? styles.searchTableBottomRadius : {}),
+        ...(isLastItem ? styles.tableBottomRadius : {}),
     }),
 
     getSearchTableGroupRowBorderStyle: (isFirstItem?: boolean, isLastItem?: boolean, isSelected?: boolean): ViewStyle => ({
         borderRadius: 0,
         borderTopWidth: isFirstItem ? 0 : 1,
         borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
-        ...(isLastItem ? styles.searchTableBottomRadius : {}),
+        ...(isLastItem ? styles.tableBottomRadius : {}),
     }),
 
     getSearchTableRowPressableStyle: (isLastItem?: boolean, isSelected?: boolean, padding?: {vertical?: number; horizontal?: number}): ViewStyle => ({
@@ -1840,7 +1840,7 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         borderBottomRightRadius: 0,
         borderBottomWidth: isLastItem ? 0 : 1,
         borderColor: isSelected ? theme.buttonHoveredBG : theme.border,
-        ...(isLastItem ? styles.searchTableBottomRadius : {}),
+        ...(isLastItem ? styles.tableBottomRadius : {}),
         ...(padding?.vertical !== undefined && {paddingVertical: padding.vertical}),
         ...(padding?.horizontal !== undefined && {paddingHorizontal: padding.horizontal}),
     }),

From 3c84767aa1da698886ae2eddde09af7ce99597ca Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:07:10 -0400
Subject: [PATCH 03/43] update table styles

---
 .../ListItem/TransactionGroupListExpanded.tsx |  2 +-
 .../ListItem/TransactionGroupListItem.tsx     |  2 +-
 .../WorkspaceCompanyCardsTableItem.tsx        | 21 +++++++++++++++----
 .../WorkspaceCompanyCardsTable/index.tsx      |  1 +
 src/styles/index.ts                           |  2 +-
 5 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
index d5bdb408ebe4..1e3d8ee88362 100644
--- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
@@ -283,7 +283,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                         onCheckboxPress={() => onSelectionButtonPress?.(transaction as unknown as TItem)}
                         columns={currentColumns}
                         onButtonPress={() => handleButtonPress(transaction)}
-                        style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.searchTableRowHeight] : styles.p4, styles.flex1]}
+                        style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.tableRowHeight] : styles.p4, styles.flex1]}
                         isReportItemChild
                         isInSingleTransactionReport={isInSingleTransactionReport}
                         shouldShowBottomBorder={shouldShowBottomBorder}
diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
index a5bddfd03f8a..3b351c91e4e0 100644
--- a/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionGroupListItem.tsx
@@ -210,7 +210,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
     const pressableStyle = [
         styles.transactionGroupListItemStyle,
         isLargeScreenWidth && {
-            ...styles.searchTableRowHeight,
+            ...styles.tableRowHeight,
             borderRadius: 0,
             paddingVertical: variables.tableGroupRowPaddingVertical,
             ...(isLastItem ? styles.tableBottomRadius : {}),
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index da5cbee64bdc..ab9a419cfc19 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -60,6 +60,9 @@ type WorkspaceCompanyCardTableItemProps = {
     /** Number of columns in the table */
     columnCount: number;
 
+    /** Whether or not the item is the last item in the table */
+    isLastItem: boolean;
+
     /**
      * Callback when assigning a card.
      * @param cardName - The masked card number displayed to users
@@ -77,6 +80,7 @@ function WorkspaceCompanyCardTableItem({
     columnCount,
     isAssigningCardDisabled,
     onAssignCard,
+    isLastItem,
 }: WorkspaceCompanyCardTableItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -110,7 +114,7 @@ function WorkspaceCompanyCardTableItem({
             shouldHideOnDelete={false}
         >
             {isDeleting ? (
-                <View style={[styles.mh5, styles.flexRow, styles.br3, styles.mb2, styles.highlightBG, styles.overflowHidden]}>
+                <View style={[styles.mh5, styles.flexRow, styles.mb2, styles.highlightBG, styles.overflowHidden]}>
                     <TableRowSkeleton
                         fixedNumItems={1}
                         useCompanyCardsLayout
@@ -120,7 +124,17 @@ function WorkspaceCompanyCardTableItem({
             ) : (
                 <PressableWithFeedback
                     role={isAssigned ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
-                    style={[styles.mh5, styles.flexRow, styles.br3, styles.mb2, styles.highlightBG, styles.overflowHidden]}
+                    style={[
+                        styles.mh5,
+                        styles.flexRow,
+                        styles.highlightBG,
+                        styles.overflowHidden,
+                        styles.ph3,
+                        styles.tableRowHeight,
+                        styles.alignItemsCenter,
+                        !isLastItem && styles.borderBottom,
+                        isLastItem && styles.tableBottomRadius,
+                    ]}
                     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
                     accessibilityLabel="row"
                     hoverStyle={isAssigned && styles.hoveredComponentBG}
@@ -148,7 +162,6 @@ function WorkspaceCompanyCardTableItem({
                                 styles.flex1,
                                 styles.flexRow,
                                 styles.alignItemsCenter,
-                                styles.p4,
                                 styles.gap3,
                                 styles.dFlex,
                                 // Use Grid on web when available (will override flex if supported)
@@ -218,8 +231,8 @@ function WorkspaceCompanyCardTableItem({
                                     </View>
                                 ) : (
                                     <Button
+                                        small
                                         success
-                                        small={shouldUseNarrowTableLayout}
                                         text={shouldUseNarrowTableLayout ? translate('workspace.companyCards.assign') : translate('workspace.companyCards.assignCard')}
                                         onPress={assignCard}
                                         isDisabled={isAssigningCardDisabled}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index f1da81157318..57bf57ef4d0f 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -290,6 +290,7 @@ function WorkspaceCompanyCardsTable({
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
             columnCount={columns.length}
+            isLastItem={index === cardsData.length - 1}
         />
     );
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 86d8640e7f88..a5152fb29d8e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2533,7 +2533,7 @@ const staticStyles = (theme: ThemeColors) =>
             borderBottomRightRadius: variables.componentBorderRadius,
         },
 
-        searchTableRowHeight: {
+        tableRowHeight: {
             minHeight: variables.tableRowHeight,
         },
 

From 40e1ee8389bf83667ba8798e06fec685d23ff055 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:19:34 -0400
Subject: [PATCH 04/43] update avatar size

---
 .../WorkspaceCompanyCardsTableItem.tsx                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index ab9a419cfc19..922497a10fc4 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -179,7 +179,7 @@ function WorkspaceCompanyCardTableItem({
                                         }
                                         avatarID={cardholder?.accountID}
                                         type={CONST.ICON_TYPE_AVATAR}
-                                        size={CONST.AVATAR_SIZE.DEFAULT}
+                                        size={CONST.AVATAR_SIZE.SMALL}
                                     />
                                 ) : (
                                     CardFeedIcon

From 914e54f2879056aeed6ea4cb0d144d4e80bb4e98 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:26:27 -0400
Subject: [PATCH 05/43] add table row component

---
 src/components/Table/TableRow.tsx | 40 ++++++++++++++++++++++++++++---
 1 file changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 666d125fdd19..0b4ab9d66b74 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,5 +1,39 @@
-type TableRowProps = {};
+import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
 
-export default function TableRow({}: TableRowProps) {
-    return <></>;
+type TableRowProps = PressableWithFeedbackProps & {
+    /** Whether this row is the last row in the table */
+    isLastRow?: boolean;
+};
+
+export default function TableRow({children, isLastRow, onPress, ...props}: TableRowProps) {
+    const styles = useThemeStyles();
+    const isPressable = onPress !== undefined;
+
+    const tableRowStyles = [
+        styles.mh5,
+        styles.flexRow,
+        styles.highlightBG,
+        styles.overflowHidden,
+        styles.ph3,
+        styles.tableRowHeight,
+        styles.alignItemsCenter,
+        isLastRow ? styles.tableBottomRadius : styles.borderBottom,
+    ];
+
+    return (
+        <PressableWithFeedback
+            accessibilityLabel="row"
+            style={tableRowStyles}
+            interactive={isPressable}
+            pressDimmingValue={isPressable ? undefined : 1}
+            hoverStyle={isPressable && styles.hoveredComponentBG}
+            role={isPressable ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
+            onPress={onPress}
+            {...props}
+        >
+            {children}
+        </PressableWithFeedback>
+    );
 }

From 2ec60ae7b4cfc33528d8fc7096d14d71c3d5e9ca Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:33:01 -0400
Subject: [PATCH 06/43] add table row component

---
 src/components/Table/TableRow.tsx             | 22 ++++---
 .../WorkspaceCompanyCardsTableItem.tsx        | 58 ++++++++-----------
 .../WorkspaceCompanyCardsTable/index.tsx      |  2 +-
 3 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 0b4ab9d66b74..dae398869844 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -2,14 +2,19 @@ import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pre
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 
-type TableRowProps = PressableWithFeedbackProps & {
+type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
+    /** When true, indicates that the view is an accessibility element.  By default, all the rows are accessible. */
+    accessible?: boolean;
+
+    /** Whether or not the table row is pressable or not */
+    interactive: boolean;
+
     /** Whether this row is the last row in the table */
-    isLastRow?: boolean;
+    isLastRow: boolean;
 };
 
-export default function TableRow({children, isLastRow, onPress, ...props}: TableRowProps) {
+export default function TableRow({children, accessible, isLastRow, interactive, onPress, ...props}: TableRowProps) {
     const styles = useThemeStyles();
-    const isPressable = onPress !== undefined;
 
     const tableRowStyles = [
         styles.mh5,
@@ -24,12 +29,13 @@ export default function TableRow({children, isLastRow, onPress, ...props}: Table
 
     return (
         <PressableWithFeedback
+            accessible
             accessibilityLabel="row"
             style={tableRowStyles}
-            interactive={isPressable}
-            pressDimmingValue={isPressable ? undefined : 1}
-            hoverStyle={isPressable && styles.hoveredComponentBG}
-            role={isPressable ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
+            interactive={interactive}
+            pressDimmingValue={interactive ? undefined : 1}
+            hoverStyle={interactive && styles.hoveredComponentBG}
+            role={interactive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
             onPress={onPress}
             {...props}
         >
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 922497a10fc4..444bab03be25 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -7,6 +7,7 @@ import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {PressableWithFeedback} from '@components/Pressable';
 import TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
+import Table from '@components/Table';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
@@ -61,7 +62,7 @@ type WorkspaceCompanyCardTableItemProps = {
     columnCount: number;
 
     /** Whether or not the item is the last item in the table */
-    isLastItem: boolean;
+    isLastRow: boolean;
 
     /**
      * Callback when assigning a card.
@@ -80,7 +81,7 @@ function WorkspaceCompanyCardTableItem({
     columnCount,
     isAssigningCardDisabled,
     onAssignCard,
-    isLastItem,
+    isLastRow,
 }: WorkspaceCompanyCardTableItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -105,6 +106,21 @@ function WorkspaceCompanyCardTableItem({
         isDeleting,
     };
 
+    const handleRowPress = () => {
+        if (!assignedCard) {
+            assignCard();
+            return;
+        }
+
+        if (!assignedCard?.accountID || !assignedCard?.fundID) {
+            return;
+        }
+
+        const feedName = getCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID);
+
+        return Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feedName as CompanyCardFeedWithDomainID, assignedCard.cardID.toString()));
+    };
+
     return (
         <OfflineWithFeedback
             errorRowStyles={[styles.ph5, styles.mb4]}
@@ -122,39 +138,11 @@ function WorkspaceCompanyCardTableItem({
                     />
                 </View>
             ) : (
-                <PressableWithFeedback
-                    role={isAssigned ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
-                    style={[
-                        styles.mh5,
-                        styles.flexRow,
-                        styles.highlightBG,
-                        styles.overflowHidden,
-                        styles.ph3,
-                        styles.tableRowHeight,
-                        styles.alignItemsCenter,
-                        !isLastItem && styles.borderBottom,
-                        isLastItem && styles.tableBottomRadius,
-                    ]}
-                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
-                    accessibilityLabel="row"
-                    hoverStyle={isAssigned && styles.hoveredComponentBG}
-                    disabled={isCardDeleted}
+                <Table.Row
+                    isLastRow={isLastRow}
                     interactive={isAssigned}
-                    pressDimmingValue={isAssigned ? undefined : 1}
-                    onPress={() => {
-                        if (!assignedCard) {
-                            assignCard();
-                            return;
-                        }
-
-                        if (!assignedCard?.accountID || !assignedCard?.fundID) {
-                            return;
-                        }
-
-                        const feedName = getCardFeedWithDomainID(assignedCard?.bank as CompanyCardFeed, assignedCard.fundID);
-
-                        return Navigation.navigate(ROUTES.WORKSPACE_COMPANY_CARD_DETAILS.getRoute(policyID, feedName as CompanyCardFeedWithDomainID, assignedCard.cardID.toString()));
-                    }}
+                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
+                    onPress={handleRowPress}
                 >
                     {({hovered}) => (
                         <View
@@ -241,7 +229,7 @@ function WorkspaceCompanyCardTableItem({
                             </View>
                         </View>
                     )}
-                </PressableWithFeedback>
+                </Table.Row>
             )}
         </OfflineWithFeedback>
     );
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 57bf57ef4d0f..492612221791 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -290,7 +290,7 @@ function WorkspaceCompanyCardsTable({
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
             columnCount={columns.length}
-            isLastItem={index === cardsData.length - 1}
+            isLastRow={index === cardsData.length - 1}
         />
     );
 

From cb1e2364150fb5b2ce83a930cde43e03d1baaf43 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:49:36 -0400
Subject: [PATCH 07/43] add row indexes

---
 src/components/Table/TableRow.tsx                | 16 +++++++++++++---
 .../WorkspaceCompanyCardsTableItem.tsx           |  8 ++++----
 .../WorkspaceCompanyCardsTable/index.tsx         |  2 +-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index dae398869844..50d3cdb1ceb3 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,6 +1,9 @@
+import React from 'react';
 import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
+import {useTableContext} from './TableContext';
 
 type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
     /** When true, indicates that the view is an accessibility element.  By default, all the rows are accessible. */
@@ -9,12 +12,18 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
     /** Whether or not the table row is pressable or not */
     interactive: boolean;
 
-    /** Whether this row is the last row in the table */
-    isLastRow: boolean;
+    /** The index of the row in the table */
+    rowIndex: number;
 };
 
-export default function TableRow({children, accessible, isLastRow, interactive, onPress, ...props}: TableRowProps) {
+export default function TableRow({children, accessible, rowIndex, interactive, onPress, ...props}: TableRowProps) {
     const styles = useThemeStyles();
+    const {processedData} = useTableContext();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+
+    const rowCount = processedData.length;
+    const isFirstRow = rowIndex === 0;
+    const isLastRow = rowIndex === rowCount - 1;
 
     const tableRowStyles = [
         styles.mh5,
@@ -24,6 +33,7 @@ export default function TableRow({children, accessible, isLastRow, interactive,
         styles.ph3,
         styles.tableRowHeight,
         styles.alignItemsCenter,
+        shouldUseNarrowLayout && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
     ];
 
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 444bab03be25..a57e1f11c247 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -61,8 +61,8 @@ type WorkspaceCompanyCardTableItemProps = {
     /** Number of columns in the table */
     columnCount: number;
 
-    /** Whether or not the item is the last item in the table */
-    isLastRow: boolean;
+    /** The index of the row */
+    rowIndex: number;
 
     /**
      * Callback when assigning a card.
@@ -79,9 +79,9 @@ function WorkspaceCompanyCardTableItem({
     isPlaidCardFeed,
     shouldUseNarrowTableLayout,
     columnCount,
+    rowIndex,
     isAssigningCardDisabled,
     onAssignCard,
-    isLastRow,
 }: WorkspaceCompanyCardTableItemProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -139,7 +139,7 @@ function WorkspaceCompanyCardTableItem({
                 </View>
             ) : (
                 <Table.Row
-                    isLastRow={isLastRow}
+                    rowIndex={rowIndex}
                     interactive={isAssigned}
                     sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
                     onPress={handleRowPress}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
index 492612221791..cee6106276be 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
@@ -283,6 +283,7 @@ function WorkspaceCompanyCardsTable({
         <WorkspaceCompanyCardTableItem
             key={`${item.cardName}_${index}`}
             item={item}
+            rowIndex={index}
             policyID={policyID ?? String(CONST.DEFAULT_NUMBER_ID)}
             CardFeedIcon={cardFeedIcon}
             isPlaidCardFeed={!!getPlaidInstitutionId(feedName)}
@@ -290,7 +291,6 @@ function WorkspaceCompanyCardsTable({
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
             columnCount={columns.length}
-            isLastRow={index === cardsData.length - 1}
         />
     );
 

From 9eeb3af2f05029a601b469a7819f17de60b33a7c Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 10:53:26 -0400
Subject: [PATCH 08/43] add mobile styling

---
 src/components/Table/TableRow.tsx | 5 +++--
 src/styles/index.ts               | 4 ++++
 src/styles/variables.ts           | 1 +
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 50d3cdb1ceb3..032829fe0ed3 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -30,9 +30,10 @@ export default function TableRow({children, accessible, rowIndex, interactive, o
         styles.flexRow,
         styles.highlightBG,
         styles.overflowHidden,
-        styles.ph3,
-        styles.tableRowHeight,
         styles.alignItemsCenter,
+        shouldUseNarrowLayout ? styles.pv4 : styles.pv2,
+        shouldUseNarrowLayout ? styles.ph4 : styles.ph3,
+        shouldUseNarrowLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
         shouldUseNarrowLayout && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
     ];
diff --git a/src/styles/index.ts b/src/styles/index.ts
index a5152fb29d8e..416b1a8da886 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2533,6 +2533,10 @@ const staticStyles = (theme: ThemeColors) =>
             borderBottomRightRadius: variables.componentBorderRadius,
         },
 
+        tableRowHeightCompact: {
+            minHeight: variables.tableRowHeightCompact,
+        },
+
         tableRowHeight: {
             minHeight: variables.tableRowHeight,
         },
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index bb410c927c31..bde125f6970f 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -122,6 +122,7 @@ export default {
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
     tableRowHeight: 56,
+    tableRowHeightCompact: 64,
     tableRowPaddingVertical: 8,
     tableRowPaddingHorizontal: 12,
     tableGroupRowPaddingVertical: 4,

From 376da8230cdbff9a990bc843858a5362187d5f77 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 11:09:29 -0400
Subject: [PATCH 09/43] cleanup the company cards table item

---
 .../WorkspaceCompanyCardsTableItem.tsx                    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index a57e1f11c247..16bd57489348 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -89,7 +89,7 @@ function WorkspaceCompanyCardTableItem({
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
     const {isOffline} = useNetwork();
 
-    const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, isCardDeleted, errors, pendingAction, onDismissError} = item;
+    const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, onDismissError} = item;
 
     const lastCardNumbers = isPlaidCardFeed ? lastFourNumbersFromCardName(cardName) : splitMaskedCardNumber(cardName)?.lastDigits;
     const cardholderLoginText = !shouldUseNarrowTableLayout && isAssigned ? Str.removeSMSDomain(cardholder?.login ?? '') : undefined;
@@ -97,8 +97,6 @@ function WorkspaceCompanyCardTableItem({
 
     const leftColumnTitle = isAssigned ? Str.removeSMSDomain(cardholder?.displayName ?? '') : translate('workspace.moreFeatures.companyCards.unassignedCards');
     const leftColumnSubtitle = shouldUseNarrowTableLayout ? narrowWidthCardName : cardholderLoginText;
-
-    const assignCard = () => onAssignCard(cardName, encryptedCardNumber);
     const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
     const reasonAttributes: SkeletonSpanReasonAttributes = {
@@ -106,6 +104,10 @@ function WorkspaceCompanyCardTableItem({
         isDeleting,
     };
 
+    const assignCard = () => {
+        onAssignCard(cardName, encryptedCardNumber);
+    };
+
     const handleRowPress = () => {
         if (!assignedCard) {
             assignCard();

From c8d95b16a955600399769cbe4fa90f7c57890613 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 11:15:34 -0400
Subject: [PATCH 10/43] migrate to a table folder

---
 .../WorkspaceCategoriesTableItem.tsx                         | 5 +++++
 src/components/Tables/WorkspaceCategoriesTable/index.tsx     | 0
 .../WorkspaceCompanyCardsTableHeaderButtons.tsx              | 0
 .../WorkspaceCompanyCardsTableItem.tsx                       | 0
 .../Tables}/WorkspaceCompanyCardsTable/index.tsx             | 0
 5 files changed, 5 insertions(+)
 create mode 100644 src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
 create mode 100644 src/components/Tables/WorkspaceCategoriesTable/index.tsx
 rename src/{pages/workspace/companyCards => components/Tables}/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx (100%)
 rename src/{pages/workspace/companyCards => components/Tables}/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx (100%)
 rename src/{pages/workspace/companyCards => components/Tables}/WorkspaceCompanyCardsTable/index.tsx (100%)

diff --git a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
new file mode 100644
index 000000000000..fbfe0457f6bd
--- /dev/null
+++ b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
@@ -0,0 +1,5 @@
+type WorkspaceCategoriesTableItemProps = {};
+
+export default function WorkspaceCategoriesTableItem({}: WorkspaceCategoriesTableItemProps) {
+    return <></>;
+}
diff --git a/src/components/Tables/WorkspaceCategoriesTable/index.tsx b/src/components/Tables/WorkspaceCategoriesTable/index.tsx
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
similarity index 100%
rename from src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
rename to src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableHeaderButtons.tsx
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
similarity index 100%
rename from src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
rename to src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
similarity index 100%
rename from src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
rename to src/components/Tables/WorkspaceCompanyCardsTable/index.tsx

From 51734b00e3897d2ff466840bf88def96c9ea8eb7 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 11:16:51 -0400
Subject: [PATCH 11/43] workspace company card table use new component

---
 src/components/Tables/WorkspaceCategoriesTable/index.tsx     | 5 +++++
 .../workspace/companyCards/WorkspaceCompanyCardsPage.tsx     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/Tables/WorkspaceCategoriesTable/index.tsx b/src/components/Tables/WorkspaceCategoriesTable/index.tsx
index e69de29bb2d1..9e2008ca8b1f 100644
--- a/src/components/Tables/WorkspaceCategoriesTable/index.tsx
+++ b/src/components/Tables/WorkspaceCategoriesTable/index.tsx
@@ -0,0 +1,5 @@
+type WorkspaceCategoriesTableProps = {};
+
+export default function WorkspaceCategoriesTable({}: WorkspaceCategoriesTableProps) {
+    return <></>;
+}
diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
index fc3895d5336d..6eec067f5f91 100644
--- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
+++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import DecisionModal from '@components/DecisionModal';
+import WorkspaceCompanyCardsTable from '@components/Tables/WorkspaceCompanyCardsTable';
 import useAssignCard from '@hooks/useAssignCard';
 import useCompanyCards from '@hooks/useCompanyCards';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
@@ -18,7 +19,6 @@ import {openPolicyCompanyCardsFeed, openPolicyCompanyCardsPage} from '@userActio
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
-import WorkspaceCompanyCardsTable from './WorkspaceCompanyCardsTable';
 
 type WorkspaceCompanyCardsPageProps = PlatformStackScreenProps<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.COMPANY_CARDS>;
 

From f1e483b183df2412dd08ff775e1499dfdb5c61e1 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 11:28:54 -0400
Subject: [PATCH 12/43] delete some tables, will do in follow up

---
 .../WorkspaceCategoriesTableItem.tsx                         | 5 -----
 src/components/Tables/WorkspaceCategoriesTable/index.tsx     | 5 -----
 2 files changed, 10 deletions(-)
 delete mode 100644 src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
 delete mode 100644 src/components/Tables/WorkspaceCategoriesTable/index.tsx

diff --git a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
deleted file mode 100644
index fbfe0457f6bd..000000000000
--- a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableItem.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-type WorkspaceCategoriesTableItemProps = {};
-
-export default function WorkspaceCategoriesTableItem({}: WorkspaceCategoriesTableItemProps) {
-    return <></>;
-}
diff --git a/src/components/Tables/WorkspaceCategoriesTable/index.tsx b/src/components/Tables/WorkspaceCategoriesTable/index.tsx
deleted file mode 100644
index 9e2008ca8b1f..000000000000
--- a/src/components/Tables/WorkspaceCategoriesTable/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-type WorkspaceCategoriesTableProps = {};
-
-export default function WorkspaceCategoriesTable({}: WorkspaceCategoriesTableProps) {
-    return <></>;
-}

From 315fee0a3df99e67f05f1561e7713b1bcf8ed8b9 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 11:48:51 -0400
Subject: [PATCH 13/43] fix table row on small views

---
 src/components/Table/TableRow.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 032829fe0ed3..92325642efa6 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -19,11 +19,12 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
 export default function TableRow({children, accessible, rowIndex, interactive, onPress, ...props}: TableRowProps) {
     const styles = useThemeStyles();
     const {processedData} = useTableContext();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
 
     const rowCount = processedData.length;
     const isFirstRow = rowIndex === 0;
     const isLastRow = rowIndex === rowCount - 1;
+    const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
 
     const tableRowStyles = [
         styles.mh5,
@@ -31,10 +32,10 @@ export default function TableRow({children, accessible, rowIndex, interactive, o
         styles.highlightBG,
         styles.overflowHidden,
         styles.alignItemsCenter,
-        shouldUseNarrowLayout ? styles.pv4 : styles.pv2,
-        shouldUseNarrowLayout ? styles.ph4 : styles.ph3,
-        shouldUseNarrowLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
-        shouldUseNarrowLayout && isFirstRow && styles.tableTopRadius,
+        isSmallView ? styles.pv4 : styles.pv2,
+        isSmallView ? styles.ph4 : styles.ph3,
+        isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
+        isSmallView && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
     ];
 

From af355abc5c62d094b3fa83e93bac292af6dff856 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 12:08:26 -0400
Subject: [PATCH 14/43] add table skeleton component

---
 src/components/Table/TableSkeleton.tsx        | 52 +++++++++++++++++++
 .../WorkspaceCompanyCardsTableSkeleton.tsx    | 41 +++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 src/components/Table/TableSkeleton.tsx
 create mode 100644 src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx

diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
new file mode 100644
index 000000000000..601ff9d5c20b
--- /dev/null
+++ b/src/components/Table/TableSkeleton.tsx
@@ -0,0 +1,52 @@
+import {View} from 'react-native';
+import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useSkeletonSpan, {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+
+type TableSkeletonProps = {
+    /** The number of skeleton rows to render */
+    rowCount?: number;
+
+    /** The reason attributes for the skeleton */
+    reasonAttributes: SkeletonSpanReasonAttributes;
+
+    /** The element to render within the table row as a skeleton */
+    renderSkeletonItem: () => React.ReactNode;
+};
+
+export default function TableSkeleton({renderSkeletonItem, reasonAttributes, rowCount = 5}: TableSkeletonProps) {
+    useSkeletonSpan('TableSkeleton', reasonAttributes);
+
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+
+    const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
+
+    const tableSkeletonRowStyles = [
+        styles.flexRow,
+        styles.overflowHidden,
+        styles.alignItemsCenter,
+        isSmallView ? styles.pv4 : styles.pv2,
+        isSmallView ? styles.ph4 : styles.ph3,
+        isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
+    ];
+
+    const rows = new Array(rowCount).fill(null).map((_, index) => (
+        <View
+            key={index}
+            style={tableSkeletonRowStyles}
+        >
+            <SkeletonViewContentLoader
+                backgroundColor={theme.skeletonLHNIn}
+                foregroundColor={theme.skeletonLHNOut}
+            >
+                {renderSkeletonItem()}
+            </SkeletonViewContentLoader>
+        </View>
+    ));
+
+    return <View style={[styles.flex1, styles.m5, styles.highlightBG, styles.tableBottomRadius, styles.tableTopRadius]}>{rows}</View>;
+}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
new file mode 100644
index 000000000000..bb364abeff88
--- /dev/null
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -0,0 +1,41 @@
+import {Circle} from 'react-native-svg';
+import SkeletonRect from '@components/SkeletonRect';
+import TableSkeleton from '@components/Table/TableSkeleton';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
+
+type WorkspaceCompanyCardsTableSkeletonProps = {};
+
+export default function WorkspaceCompanyCardsTableSkeleton({}: WorkspaceCompanyCardsTableSkeletonProps) {
+    useSkeletonSpan('TableRowSkeleton', reasonAttributes);
+
+    const circleX = 36;
+    const circleY = 36;
+    const rectX = 68;
+    const rectY1 = 24;
+    const rectY2 = 40;
+
+    return (
+        <TableSkeleton
+            rowCount={5}
+            renderSkeletonItem={() => {
+                <>
+                    <Circle
+                        cx={36}
+                        cy={36}
+                        r="20"
+                    />
+                    <SkeletonRect
+                        transform={[{translateX: rectX}, {translateY: rectY1}]}
+                        width={124}
+                        height={8}
+                    />
+                    <SkeletonRect
+                        transform={[{translateX: rectX}, {translateY: rectY2}]}
+                        width={60}
+                        height={8}
+                    />
+                </>;
+            }}
+        />
+    );
+}

From b05696464a7ac3120889f79c0d1f3532350b13e8 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 12:12:24 -0400
Subject: [PATCH 15/43] work on skeleton more

---
 src/components/Table/TableSkeleton.tsx        |  1 +
 .../WorkspaceCompanyCardsTableItem.tsx        | 11 +++-------
 .../WorkspaceCompanyCardsTableSkeleton.tsx    | 22 ++++++++-----------
 .../WorkspaceCompanyCardsTable/index.tsx      |  8 ++-----
 4 files changed, 15 insertions(+), 27 deletions(-)

diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 601ff9d5c20b..3bdb5f209700 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import {View} from 'react-native';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index 16bd57489348..e3b21660ab56 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -24,6 +24,7 @@ import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID} from '@src/types/onyx';
 import type {CardAssignmentData} from '@src/types/onyx/Card';
+import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton';
 
 type WorkspaceCompanyCardTableItemData = CardAssignmentData & {
     /** Whether the card is deleted */
@@ -131,14 +132,8 @@ function WorkspaceCompanyCardTableItem({
             onClose={onDismissError}
             shouldHideOnDelete={false}
         >
-            {isDeleting ? (
-                <View style={[styles.mh5, styles.flexRow, styles.mb2, styles.highlightBG, styles.overflowHidden]}>
-                    <TableRowSkeleton
-                        fixedNumItems={1}
-                        useCompanyCardsLayout
-                        reasonAttributes={reasonAttributes}
-                    />
-                </View>
+            {true ? (
+                <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />
             ) : (
                 <Table.Row
                     rowIndex={rowIndex}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
index bb364abeff88..9eeb4b1b711e 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -1,22 +1,18 @@
+import React from 'react';
 import {Circle} from 'react-native-svg';
 import SkeletonRect from '@components/SkeletonRect';
 import TableSkeleton from '@components/Table/TableSkeleton';
-import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
+import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 
-type WorkspaceCompanyCardsTableSkeletonProps = {};
-
-export default function WorkspaceCompanyCardsTableSkeleton({}: WorkspaceCompanyCardsTableSkeletonProps) {
-    useSkeletonSpan('TableRowSkeleton', reasonAttributes);
-
-    const circleX = 36;
-    const circleY = 36;
-    const rectX = 68;
-    const rectY1 = 24;
-    const rectY2 = 40;
+type WorkspaceCompanyCardsTableSkeletonProps = {
+    reasonAttributes: SkeletonSpanReasonAttributes;
+};
 
+export default function WorkspaceCompanyCardsTableSkeleton({reasonAttributes}: WorkspaceCompanyCardsTableSkeletonProps) {
     return (
         <TableSkeleton
             rowCount={5}
+            reasonAttributes={reasonAttributes}
             renderSkeletonItem={() => {
                 <>
                     <Circle
@@ -25,12 +21,12 @@ export default function WorkspaceCompanyCardsTableSkeleton({}: WorkspaceCompanyC
                         r="20"
                     />
                     <SkeletonRect
-                        transform={[{translateX: rectX}, {translateY: rectY1}]}
+                        transform={[{translateX: 68}, {translateY: 20}]}
                         width={124}
                         height={8}
                     />
                     <SkeletonRect
-                        transform={[{translateX: rectX}, {translateY: rectY2}]}
+                        transform={[{translateX: 68}, {translateY: 362}]}
                         width={60}
                         height={8}
                     />
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index cee6106276be..fad37d1a336d 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -31,6 +31,7 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardsTableHeaderButtons from './WorkspaceCompanyCardsTableHeaderButtons';
 import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableItem';
 import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableItem';
+import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton';
 
 type CompanyCardsTableColumnKey = 'member' | 'card' | 'customCardName';
 
@@ -372,12 +373,7 @@ function WorkspaceCompanyCardsTable({
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
-                    {isLoading && (
-                        <TableRowSkeleton
-                            fixedNumItems={5}
-                            reasonAttributes={reasonAttributes}
-                        />
-                    )}
+                    {isLoading && <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />}
 
                     {!isLoading && isFeedPending && (
                         <View style={styles.flex1}>

From c8bbd822b72d66bd19ee778a0f5ca2d8d2531de2 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 13:05:11 -0400
Subject: [PATCH 16/43] add new skeletons

---
 src/components/Table/TableSkeleton.tsx           |  8 +++++---
 .../WorkspaceCompanyCardsTableSkeleton.tsx       | 16 ++++++++--------
 .../Tables/WorkspaceCompanyCardsTable/index.tsx  |  2 ++
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 3bdb5f209700..3c4b7e7a1787 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -5,6 +5,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useSkeletonSpan, {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import variables from '@styles/variables';
 
 type TableSkeletonProps = {
     /** The number of skeleton rows to render */
@@ -30,7 +31,7 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
         styles.flexRow,
         styles.overflowHidden,
         styles.alignItemsCenter,
-        isSmallView ? styles.pv4 : styles.pv2,
+        styles.highlightBG,
         isSmallView ? styles.ph4 : styles.ph3,
         isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];
@@ -38,16 +39,17 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
     const rows = new Array(rowCount).fill(null).map((_, index) => (
         <View
             key={index}
-            style={tableSkeletonRowStyles}
+            style={[tableSkeletonRowStyles, index !== rowCount - 1 && styles.borderBottom]}
         >
             <SkeletonViewContentLoader
                 backgroundColor={theme.skeletonLHNIn}
                 foregroundColor={theme.skeletonLHNOut}
+                height={isSmallView ? variables.tableRowHeightCompact : variables.tableRowHeight}
             >
                 {renderSkeletonItem()}
             </SkeletonViewContentLoader>
         </View>
     ));
 
-    return <View style={[styles.flex1, styles.m5, styles.highlightBG, styles.tableBottomRadius, styles.tableTopRadius]}>{rows}</View>;
+    return <View style={[styles.flex1, styles.m5, styles.tableBottomRadius, styles.overflowHidden, styles.tableTopRadius]}>{rows}</View>;
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
index 9eeb4b1b711e..20987152cff1 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -13,25 +13,25 @@ export default function WorkspaceCompanyCardsTableSkeleton({reasonAttributes}: W
         <TableSkeleton
             rowCount={5}
             reasonAttributes={reasonAttributes}
-            renderSkeletonItem={() => {
+            renderSkeletonItem={() => (
                 <>
                     <Circle
-                        cx={36}
-                        cy={36}
-                        r="20"
+                        cx={28}
+                        cy={28}
+                        r="14"
                     />
                     <SkeletonRect
-                        transform={[{translateX: 68}, {translateY: 20}]}
+                        transform={[{translateX: 58}, {translateY: 16}]}
                         width={124}
                         height={8}
                     />
                     <SkeletonRect
-                        transform={[{translateX: 68}, {translateY: 362}]}
+                        transform={[{translateX: 58}, {translateY: 32}]}
                         width={60}
                         height={8}
                     />
-                </>;
-            }}
+                </>
+            )}
         />
     );
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index fad37d1a336d..2de503c90049 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -345,6 +345,8 @@ function WorkspaceCompanyCardsTable({
         isLoadingCards,
     };
 
+    return <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />;
+
     return (
         <Table
             ref={tableRef}

From fdeeb1febad75ff5b873cce829ac57cefc5bc10c Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 13:27:40 -0400
Subject: [PATCH 17/43] update skeleton behavior

---
 src/components/Table/TableRow.tsx             |  21 ++-
 src/components/Table/TableSkeleton.tsx        |   5 +-
 .../WorkspaceCompanyCardsTableItem.tsx        | 177 +++++++++---------
 .../WorkspaceCompanyCardsTableSkeleton.tsx    |  48 ++---
 .../WorkspaceCompanyCardsTable/index.tsx      |  23 +--
 5 files changed, 133 insertions(+), 141 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 92325642efa6..4eca80ba04c4 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
 
@@ -14,9 +15,18 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
 
     /** The index of the row in the table */
     rowIndex: number;
+
+    /** Whether or not the table row is loading */
+    isLoading?: boolean;
+
+    /** The loading component to render within the table row when the row is loading */
+    LoadingComponent?: React.ComponentType;
+
+    /** The reason attributes if the table row is loading */
+    skeletonReasonAttributes?: SkeletonSpanReasonAttributes;
 };
 
-export default function TableRow({children, accessible, rowIndex, interactive, onPress, ...props}: TableRowProps) {
+export default function TableRow({children, accessible, rowIndex, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
     const styles = useThemeStyles();
     const {processedData} = useTableContext();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
@@ -25,6 +35,7 @@ export default function TableRow({children, accessible, rowIndex, interactive, o
     const isFirstRow = rowIndex === 0;
     const isLastRow = rowIndex === rowCount - 1;
     const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
+    const isInteractive = interactive && !isLoading;
 
     const tableRowStyles = [
         styles.mh5,
@@ -44,10 +55,10 @@ export default function TableRow({children, accessible, rowIndex, interactive, o
             accessible
             accessibilityLabel="row"
             style={tableRowStyles}
-            interactive={interactive}
-            pressDimmingValue={interactive ? undefined : 1}
-            hoverStyle={interactive && styles.hoveredComponentBG}
-            role={interactive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
+            interactive={isInteractive}
+            pressDimmingValue={isInteractive ? undefined : 1}
+            hoverStyle={isInteractive && styles.hoveredComponentBG}
+            role={isInteractive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
             onPress={onPress}
             {...props}
         >
diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 3c4b7e7a1787..2e48180d76e5 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -14,7 +14,7 @@ type TableSkeletonProps = {
     /** The reason attributes for the skeleton */
     reasonAttributes: SkeletonSpanReasonAttributes;
 
-    /** The element to render within the table row as a skeleton */
+    /** The skeleton elements to render within the table row as a skeleton */
     renderSkeletonItem: () => React.ReactNode;
 };
 
@@ -31,7 +31,6 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
         styles.flexRow,
         styles.overflowHidden,
         styles.alignItemsCenter,
-        styles.highlightBG,
         isSmallView ? styles.ph4 : styles.ph3,
         isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];
@@ -51,5 +50,5 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
         </View>
     ));
 
-    return <View style={[styles.flex1, styles.m5, styles.tableBottomRadius, styles.overflowHidden, styles.tableTopRadius]}>{rows}</View>;
+    return <View style={[styles.m5, styles.tableBottomRadius, styles.overflowHidden, styles.tableTopRadius, styles.highlightBG]}>{rows}</View>;
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
index e3b21660ab56..c8c6c82d4e9d 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
@@ -5,8 +5,6 @@ import Avatar from '@components/Avatar';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import {PressableWithFeedback} from '@components/Pressable';
-import TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Table from '@components/Table';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
@@ -132,102 +130,101 @@ function WorkspaceCompanyCardTableItem({
             onClose={onDismissError}
             shouldHideOnDelete={false}
         >
-            {true ? (
-                <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />
-            ) : (
-                <Table.Row
-                    rowIndex={rowIndex}
-                    interactive={isAssigned}
-                    sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
-                    onPress={handleRowPress}
-                >
-                    {({hovered}) => (
-                        <View
-                            style={[
-                                styles.flex1,
-                                styles.flexRow,
-                                styles.alignItemsCenter,
-                                styles.gap3,
-                                styles.dFlex,
-                                // Use Grid on web when available (will override flex if supported)
-                                !shouldUseNarrowTableLayout && [styles.dGrid, {gridTemplateColumns: `repeat(${columnCount}, 1fr)`}],
-                            ]}
-                        >
-                            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
-                                {isAssigned ? (
-                                    <Avatar
-                                        source={
-                                            cardholder?.avatar ??
-                                            getDefaultAvatarURL({
-                                                accountID: cardholder?.accountID,
-                                            })
-                                        }
-                                        avatarID={cardholder?.accountID}
-                                        type={CONST.ICON_TYPE_AVATAR}
-                                        size={CONST.AVATAR_SIZE.SMALL}
-                                    />
-                                ) : (
-                                    CardFeedIcon
-                                )}
+            <Table.Row
+                rowIndex={rowIndex}
+                interactive={isAssigned}
+                sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
+                isLoading={isDeleting}
+                LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
+                skeletonReasonAttributes={reasonAttributes}
+                onPress={handleRowPress}
+            >
+                {({hovered}) => (
+                    <View
+                        style={[
+                            styles.flex1,
+                            styles.flexRow,
+                            styles.alignItemsCenter,
+                            styles.gap3,
+                            styles.dFlex,
+                            // Use Grid on web when available (will override flex if supported)
+                            !shouldUseNarrowTableLayout && [styles.dGrid, {gridTemplateColumns: `repeat(${columnCount}, 1fr)`}],
+                        ]}
+                    >
+                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                            {isAssigned ? (
+                                <Avatar
+                                    source={
+                                        cardholder?.avatar ??
+                                        getDefaultAvatarURL({
+                                            accountID: cardholder?.accountID,
+                                        })
+                                    }
+                                    avatarID={cardholder?.accountID}
+                                    type={CONST.ICON_TYPE_AVATAR}
+                                    size={CONST.AVATAR_SIZE.SMALL}
+                                />
+                            ) : (
+                                CardFeedIcon
+                            )}
 
-                                <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
+                            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
+                                <TextWithTooltip
+                                    text={leftColumnTitle}
+                                    style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter, !isAssigned && styles.cursorText]}
+                                />
+                                {!!leftColumnSubtitle && (
                                     <TextWithTooltip
-                                        text={leftColumnTitle}
-                                        style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter, !isAssigned && styles.cursorText]}
+                                        text={leftColumnSubtitle}
+                                        style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3, !isAssigned && styles.cursorText]}
                                     />
-                                    {!!leftColumnSubtitle && (
-                                        <TextWithTooltip
-                                            text={leftColumnSubtitle}
-                                            style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3, !isAssigned && styles.cursorText]}
-                                        />
-                                    )}
-                                </View>
+                                )}
                             </View>
+                        </View>
 
-                            {!shouldUseNarrowTableLayout && (
-                                <View style={[styles.flex1]}>
-                                    <Text
-                                        numberOfLines={1}
-                                        style={[styles.lh16, styles.optionDisplayName, styles.pre, !isAssigned && styles.cursorText]}
-                                    >
-                                        {formatMaskedCardName(cardName)}
-                                    </Text>
+                        {!shouldUseNarrowTableLayout && (
+                            <View style={[styles.flex1]}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={[styles.lh16, styles.optionDisplayName, styles.pre, !isAssigned && styles.cursorText]}
+                                >
+                                    {formatMaskedCardName(cardName)}
+                                </Text>
+                            </View>
+                        )}
+
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
+                            {isAssigned ? (
+                                <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
+                                    {!shouldUseNarrowTableLayout && (
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[styles.optionDisplayName, styles.pre]}
+                                        >
+                                            {customCardName}
+                                        </Text>
+                                    )}
+                                    <Icon
+                                        src={Expensicons.ArrowRight}
+                                        fill={theme.icon}
+                                        additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
+                                        width={variables.iconSizeNormal}
+                                        height={variables.iconSizeNormal}
+                                    />
                                 </View>
+                            ) : (
+                                <Button
+                                    small
+                                    success
+                                    text={shouldUseNarrowTableLayout ? translate('workspace.companyCards.assign') : translate('workspace.companyCards.assignCard')}
+                                    onPress={assignCard}
+                                    isDisabled={isAssigningCardDisabled}
+                                />
                             )}
-
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-                                {isAssigned ? (
-                                    <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
-                                        {!shouldUseNarrowTableLayout && (
-                                            <Text
-                                                numberOfLines={1}
-                                                style={[styles.optionDisplayName, styles.pre]}
-                                            >
-                                                {customCardName}
-                                            </Text>
-                                        )}
-                                        <Icon
-                                            src={Expensicons.ArrowRight}
-                                            fill={theme.icon}
-                                            additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
-                                            width={variables.iconSizeNormal}
-                                            height={variables.iconSizeNormal}
-                                        />
-                                    </View>
-                                ) : (
-                                    <Button
-                                        small
-                                        success
-                                        text={shouldUseNarrowTableLayout ? translate('workspace.companyCards.assign') : translate('workspace.companyCards.assignCard')}
-                                        onPress={assignCard}
-                                        isDisabled={isAssigningCardDisabled}
-                                    />
-                                )}
-                            </View>
                         </View>
-                    )}
-                </Table.Row>
-            )}
+                    </View>
+                )}
+            </Table.Row>
         </OfflineWithFeedback>
     );
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
index 20987152cff1..e554c96cf4d8 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -1,37 +1,25 @@
 import React from 'react';
 import {Circle} from 'react-native-svg';
 import SkeletonRect from '@components/SkeletonRect';
-import TableSkeleton from '@components/Table/TableSkeleton';
-import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 
-type WorkspaceCompanyCardsTableSkeletonProps = {
-    reasonAttributes: SkeletonSpanReasonAttributes;
-};
-
-export default function WorkspaceCompanyCardsTableSkeleton({reasonAttributes}: WorkspaceCompanyCardsTableSkeletonProps) {
+export default function WorkspaceCompanyCardsTableSkeleton() {
     return (
-        <TableSkeleton
-            rowCount={5}
-            reasonAttributes={reasonAttributes}
-            renderSkeletonItem={() => (
-                <>
-                    <Circle
-                        cx={28}
-                        cy={28}
-                        r="14"
-                    />
-                    <SkeletonRect
-                        transform={[{translateX: 58}, {translateY: 16}]}
-                        width={124}
-                        height={8}
-                    />
-                    <SkeletonRect
-                        transform={[{translateX: 58}, {translateY: 32}]}
-                        width={60}
-                        height={8}
-                    />
-                </>
-            )}
-        />
+        <>
+            <Circle
+                cx={28}
+                cy={28}
+                r="14"
+            />
+            <SkeletonRect
+                transform={[{translateX: 58}, {translateY: 16}]}
+                width={124}
+                height={8}
+            />
+            <SkeletonRect
+                transform={[{translateX: 58}, {translateY: 32}]}
+                width={60}
+                height={8}
+            />
+        </>
     );
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 2de503c90049..cde24fdefd1a 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -5,9 +5,9 @@ import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
 import CardFeedIcon from '@components/CardFeedIcon';
 import ScrollView from '@components/ScrollView';
-import TableRowSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Table from '@components/Table';
 import type {ActiveSorting, CompareItemsCallback, FilterConfig, IsItemInFilterCallback, IsItemInSearchCallback, TableColumn, TableHandle} from '@components/Table';
+import TableSkeleton from '@components/Table/TableSkeleton';
 import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle';
 import useCardFeedErrors from '@hooks/useCardFeedErrors';
 import type {UseCompanyCardsResult} from '@hooks/useCompanyCards';
@@ -345,7 +345,13 @@ function WorkspaceCompanyCardsTable({
         isLoadingCards,
     };
 
-    return <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />;
+    const LoadingComponent = () => (
+        <TableSkeleton
+            rowCount={5}
+            reasonAttributes={reasonAttributes}
+            renderSkeletonItem={WorkspaceCompanyCardsTableSkeleton}
+        />
+    );
 
     return (
         <Table
@@ -359,23 +365,14 @@ function WorkspaceCompanyCardsTable({
             isItemInFilter={isItemInFilter}
             filters={filterConfig}
             initialSortColumn="member"
-            ListEmptyComponent={
-                isLoadingCards ? (
-                    <TableRowSkeleton
-                        fixedNumItems={5}
-                        reasonAttributes={reasonAttributes}
-                    />
-                ) : (
-                    <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />
-                )
-            }
+            ListEmptyComponent={isLoadingCards ? LoadingComponent : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
             ListHeaderComponent={shouldUseNarrowTableLayout ? headerButtonsComponent : undefined}
         >
             {shouldRenderHeaderAsChild && headerButtonsComponent}
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
-                    {isLoading && <WorkspaceCompanyCardsTableSkeleton reasonAttributes={reasonAttributes} />}
+                    {isLoading && <LoadingComponent />}
 
                     {!isLoading && isFeedPending && (
                         <View style={styles.flex1}>

From 7d3f1c5788f69d6db113ae50de130d950df6fd66 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 13:32:36 -0400
Subject: [PATCH 18/43] update table row to accept loading

---
 src/components/Table/TableRow.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 4eca80ba04c4..859473150bdb 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,8 +1,11 @@
 import React from 'react';
 import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
 
@@ -27,6 +30,7 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
 };
 
 export default function TableRow({children, accessible, rowIndex, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {processedData} = useTableContext();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
@@ -62,7 +66,17 @@ export default function TableRow({children, accessible, rowIndex, interactive, i
             onPress={onPress}
             {...props}
         >
-            {children}
+            {!!isLoading && LoadingComponent ? (
+                <SkeletonViewContentLoader
+                    backgroundColor={theme.skeletonLHNIn}
+                    foregroundColor={theme.skeletonLHNOut}
+                    height={isSmallView ? variables.tableRowHeightCompact : variables.tableRowHeight}
+                >
+                    <LoadingComponent />
+                </SkeletonViewContentLoader>
+            ) : (
+                children
+            )}
         </PressableWithFeedback>
     );
 }

From dbc107720c62a27ab2a326996b87458aebd6470d Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 13:38:40 -0400
Subject: [PATCH 19/43] cleanup loading state

---
 src/components/Table/TableRow.tsx              |  5 +++--
 ...m.tsx => WorkspaceCompanyCardsTableRow.tsx} | 18 +++++++++---------
 .../WorkspaceCompanyCardsTableSkeleton.tsx     |  6 +++---
 .../WorkspaceCompanyCardsTable/index.tsx       |  4 ++--
 4 files changed, 17 insertions(+), 16 deletions(-)
 rename src/components/Tables/WorkspaceCompanyCardsTable/{WorkspaceCompanyCardsTableItem.tsx => WorkspaceCompanyCardsTableRow.tsx} (96%)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 859473150bdb..aef338ea29e8 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -47,11 +47,12 @@ export default function TableRow({children, accessible, rowIndex, interactive, i
         styles.highlightBG,
         styles.overflowHidden,
         styles.alignItemsCenter,
-        isSmallView ? styles.pv4 : styles.pv2,
         isSmallView ? styles.ph4 : styles.ph3,
-        isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
+        isSmallView && !isLoading && styles.pv4,
+        !isSmallView && !isLoading && styles.pv2,
         isSmallView && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
+        isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];
 
     return (
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
similarity index 96%
rename from src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
rename to src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index c8c6c82d4e9d..a1e055e2b036 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -24,7 +24,7 @@ import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID} from '@src/type
 import type {CardAssignmentData} from '@src/types/onyx/Card';
 import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton';
 
-type WorkspaceCompanyCardTableItemData = CardAssignmentData & {
+type WorkspaceCompanyCardTableRowData = CardAssignmentData & {
     /** Whether the card is deleted */
     isCardDeleted: boolean;
 
@@ -38,9 +38,9 @@ type WorkspaceCompanyCardTableItemData = CardAssignmentData & {
     onDismissError?: () => void;
 };
 
-type WorkspaceCompanyCardTableItemProps = {
+type WorkspaceCompanyCardTableRowProps = {
     /** The workspace company card table item */
-    item: WorkspaceCompanyCardTableItemData;
+    item: WorkspaceCompanyCardTableRowData;
 
     /** Policy ID */
     policyID: string;
@@ -71,7 +71,7 @@ type WorkspaceCompanyCardTableItemProps = {
     onAssignCard: (cardName: string, cardID: string) => void;
 };
 
-function WorkspaceCompanyCardTableItem({
+function WorkspaceCompanyCardTableRow({
     item,
     policyID,
     CardFeedIcon,
@@ -81,7 +81,7 @@ function WorkspaceCompanyCardTableItem({
     rowIndex,
     isAssigningCardDisabled,
     onAssignCard,
-}: WorkspaceCompanyCardTableItemProps) {
+}: WorkspaceCompanyCardTableRowProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -132,11 +132,11 @@ function WorkspaceCompanyCardTableItem({
         >
             <Table.Row
                 rowIndex={rowIndex}
+                isLoading={isDeleting}
                 interactive={isAssigned}
+                skeletonReasonAttributes={reasonAttributes}
                 sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
-                isLoading={isDeleting}
                 LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
-                skeletonReasonAttributes={reasonAttributes}
                 onPress={handleRowPress}
             >
                 {({hovered}) => (
@@ -229,5 +229,5 @@ function WorkspaceCompanyCardTableItem({
     );
 }
 
-export default WorkspaceCompanyCardTableItem;
-export type {WorkspaceCompanyCardTableItemData};
+export default WorkspaceCompanyCardTableRow;
+export type {WorkspaceCompanyCardTableRowData as WorkspaceCompanyCardTableItemData};
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
index e554c96cf4d8..0bb9ea2918a2 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -6,17 +6,17 @@ export default function WorkspaceCompanyCardsTableSkeleton() {
     return (
         <>
             <Circle
-                cx={28}
+                cx={20}
                 cy={28}
                 r="14"
             />
             <SkeletonRect
-                transform={[{translateX: 58}, {translateY: 16}]}
+                transform={[{translateX: 50}, {translateY: 16}]}
                 width={124}
                 height={8}
             />
             <SkeletonRect
-                transform={[{translateX: 58}, {translateY: 32}]}
+                transform={[{translateX: 50}, {translateY: 32}]}
                 width={60}
                 height={8}
             />
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index cde24fdefd1a..58f644609605 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -29,8 +29,8 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import WorkspaceCompanyCardsTableHeaderButtons from './WorkspaceCompanyCardsTableHeaderButtons';
-import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableItem';
-import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableItem';
+import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableRow';
+import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableRow';
 import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton';
 
 type CompanyCardsTableColumnKey = 'member' | 'card' | 'customCardName';

From 9bf0ca43db9793878c3f062eb90d7fa609924ac9 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 13:40:52 -0400
Subject: [PATCH 20/43] cleanup code

---
 src/components/Table/TableHeader.tsx | 4 ++--
 src/components/Table/TableRow.tsx    | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index c5308729b37b..a248dbfce168 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -60,9 +60,9 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
     return (
         <View
             style={[
-                styles.highlightBG,
-                styles.mh5,
                 styles.p3,
+                styles.mh5,
+                styles.highlightBG,
                 styles.borderBottom,
                 styles.tableTopRadius,
                 // Flexbox fallback for browsers / native devices wider than 1024px which don't support grid
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index aef338ea29e8..a643ce2a1b0d 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -38,8 +38,8 @@ export default function TableRow({children, accessible, rowIndex, interactive, i
     const rowCount = processedData.length;
     const isFirstRow = rowIndex === 0;
     const isLastRow = rowIndex === rowCount - 1;
-    const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
     const isInteractive = interactive && !isLoading;
+    const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
 
     const tableRowStyles = [
         styles.mh5,

From 5432c4494aaa573f328090f075e366bc91273759 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Thu, 7 May 2026 14:02:06 -0400
Subject: [PATCH 21/43] fix lint & types

---
 .../ListItem/TransactionGroupListExpanded.tsx |  2 +-
 src/components/Table/TableRow.tsx             |  9 ++++++---
 src/components/Table/TableSkeleton.tsx        |  5 ++++-
 .../WorkspaceCompanyCardsTable/index.tsx      | 19 +++++++++++--------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
index ccee4aa4108e..c6979bd24e01 100644
--- a/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionGroupListExpanded.tsx
@@ -311,7 +311,7 @@ function TransactionGroupListExpanded<TItem extends ListItem>({
                                     onCheckboxPress={() => onSelectionButtonPress?.(transaction as unknown as TItem)}
                                     columns={currentColumns}
                                     onButtonPress={() => handleButtonPress(transaction)}
-                                    style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.searchTableRowHeight] : styles.p4, styles.flex1]}
+                                    style={[styles.noBorderRadius, isLargeScreenWidth ? [styles.p3, styles.pv2, styles.tableRowHeight] : styles.p4, styles.flex1]}
                                     isReportItemChild
                                     isInSingleTransactionReport={isInSingleTransactionReport}
                                     shouldShowBottomBorder={shouldShowBottomBorder}
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index a643ce2a1b0d..e241f371c58a 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import PressableWithFeedback, {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import type {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
+import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
@@ -29,7 +30,7 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
     skeletonReasonAttributes?: SkeletonSpanReasonAttributes;
 };
 
-export default function TableRow({children, accessible, rowIndex, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
+export default function TableRow({children, accessible, rowIndex, sentryLabel, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {processedData} = useTableContext();
@@ -60,11 +61,13 @@ export default function TableRow({children, accessible, rowIndex, interactive, i
             accessible
             accessibilityLabel="row"
             style={tableRowStyles}
+            sentryLabel={sentryLabel}
             interactive={isInteractive}
             pressDimmingValue={isInteractive ? undefined : 1}
             hoverStyle={isInteractive && styles.hoveredComponentBG}
             role={isInteractive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
             onPress={onPress}
+            // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
             {!!isLoading && LoadingComponent ? (
diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 2e48180d76e5..90e2d9eac19a 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -4,7 +4,8 @@ import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useSkeletonSpan, {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
 
 type TableSkeletonProps = {
@@ -37,6 +38,8 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
 
     const rows = new Array(rowCount).fill(null).map((_, index) => (
         <View
+            // We use an index since this is a loading state w/ no other data
+            // eslint-disable-next-line react/no-array-index-key
             key={index}
             style={[tableSkeletonRowStyles, index !== rowCount - 1 && styles.borderBottom]}
         >
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 58f644609605..1d83626ac59f 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -1,5 +1,5 @@
 import type {ListRenderItemInfo} from '@shopify/flash-list';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
@@ -345,12 +345,15 @@ function WorkspaceCompanyCardsTable({
         isLoadingCards,
     };
 
-    const LoadingComponent = () => (
-        <TableSkeleton
-            rowCount={5}
-            reasonAttributes={reasonAttributes}
-            renderSkeletonItem={WorkspaceCompanyCardsTableSkeleton}
-        />
+    const LoadingComponent = useMemo(
+        () => (
+            <TableSkeleton
+                rowCount={5}
+                reasonAttributes={reasonAttributes}
+                renderSkeletonItem={WorkspaceCompanyCardsTableSkeleton}
+            />
+        ),
+        [reasonAttributes],
     );
 
     return (
@@ -372,7 +375,7 @@ function WorkspaceCompanyCardsTable({
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
-                    {isLoading && <LoadingComponent />}
+                    {isLoading && LoadingComponent}
 
                     {!isLoading && isFeedPending && (
                         <View style={styles.flex1}>

From 2e83bb676e03dd34c89728717ee520c8c5f0ce26 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 08:45:08 -0400
Subject: [PATCH 22/43] update styling to new styles

---
 .../WorkspaceCompanyCardsTableRow.tsx         | 54 +++++++++----------
 .../WorkspaceCompanyCardsTable/index.tsx      | 10 ++--
 src/styles/variables.ts                       |  2 +
 3 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index a1e055e2b036..9a92ad9ad5fe 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -103,13 +103,10 @@ function WorkspaceCompanyCardTableRow({
         isDeleting,
     };
 
-    const assignCard = () => {
-        onAssignCard(cardName, encryptedCardNumber);
-    };
-
     const handleRowPress = () => {
         if (!assignedCard) {
-            assignCard();
+            onAssignCard(cardName, encryptedCardNumber);
+
             return;
         }
 
@@ -131,9 +128,9 @@ function WorkspaceCompanyCardTableRow({
             shouldHideOnDelete={false}
         >
             <Table.Row
+                interactive
                 rowIndex={rowIndex}
                 isLoading={isDeleting}
-                interactive={isAssigned}
                 skeletonReasonAttributes={reasonAttributes}
                 sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
                 LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
@@ -171,7 +168,7 @@ function WorkspaceCompanyCardTableRow({
                             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
                                 <TextWithTooltip
                                     text={leftColumnTitle}
-                                    style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre, styles.justifyContentCenter, !isAssigned && styles.cursorText]}
+                                    style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, !isAssigned && styles.cursorText]}
                                 />
                                 {!!leftColumnSubtitle && (
                                     <TextWithTooltip
@@ -193,34 +190,35 @@ function WorkspaceCompanyCardTableRow({
                             </View>
                         )}
 
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd]}>
-                            {isAssigned ? (
-                                <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
-                                    {!shouldUseNarrowTableLayout && (
-                                        <Text
-                                            numberOfLines={1}
-                                            style={[styles.optionDisplayName, styles.pre]}
-                                        >
-                                            {customCardName}
-                                        </Text>
-                                    )}
-                                    <Icon
-                                        src={Expensicons.ArrowRight}
-                                        fill={theme.icon}
-                                        additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
-                                        width={variables.iconSizeNormal}
-                                        height={variables.iconSizeNormal}
-                                    />
-                                </View>
-                            ) : (
+                        <View style={[styles.flex1]}>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.lh16, styles.optionDisplayName, styles.pre, !isAssigned && styles.cursorText]}
+                            >
+                                {customCardName}
+                            </Text>
+                        </View>
+
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap3]}>
+                            {!isAssigned && (
                                 <Button
                                     small
                                     success
                                     text={shouldUseNarrowTableLayout ? translate('workspace.companyCards.assign') : translate('workspace.companyCards.assignCard')}
-                                    onPress={assignCard}
+                                    onPress={handleRowPress}
                                     isDisabled={isAssigningCardDisabled}
                                 />
                             )}
+
+                            <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
+                                <Icon
+                                    src={Expensicons.ArrowRight}
+                                    fill={theme.icon}
+                                    additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
+                                    width={variables.iconSizeNormal}
+                                    height={variables.iconSizeNormal}
+                                />
+                            </View>
                         </View>
                     </View>
                 )}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 1d83626ac59f..1ed212da93e9 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -33,7 +33,7 @@ import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableRow';
 import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableRow';
 import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton';
 
-type CompanyCardsTableColumnKey = 'member' | 'card' | 'customCardName';
+type CompanyCardsTableColumnKey = 'member' | 'card' | 'customCardName' | 'actions';
 
 type WorkspaceCompanyCardsTableProps = {
     /** Policy ID */
@@ -156,6 +156,10 @@ function WorkspaceCompanyCardsTable({
         {
             key: 'customCardName',
             label: translate('workspace.companyCards.cardName'),
+        },
+        {
+            key: 'actions',
+            label: '',
             styling: {
                 containerStyles: [styles.justifyContentEnd, styles.pr3],
             },
@@ -271,8 +275,8 @@ function WorkspaceCompanyCardsTable({
         <CardFeedIcon
             key={feedName}
             iconProps={{
-                height: variables.cardIconHeight,
-                width: variables.cardIconWidth,
+                height: variables.cardIconSmallHeight,
+                width: variables.cardIconSmallWidth,
                 additionalStyles: styles.cardIcon,
             }}
             selectedFeed={feedName}
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index bde125f6970f..7f8711025bb8 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -298,6 +298,8 @@ export default {
     cardScarfOverlayZIndex: 2,
     cardIconWidth: 40,
     cardIconHeight: 26,
+    cardIconSmallWidth: 28,
+    cardIconSmallHeight: 18,
     cardBorderRadius: 4,
     cardMiniatureWidth: 20,
     cardMiniatureHeight: 13,

From ad6399abab27fee9e546f528261dc018cc42827e Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 09:02:31 -0400
Subject: [PATCH 23/43] cleanup table rows

---
 src/components/Table/TableRow.tsx                  |  3 ++-
 .../WorkspaceCompanyCardsTableRow.tsx              | 14 +++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index e241f371c58a..352d42f530f8 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -48,9 +48,10 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
         styles.highlightBG,
         styles.overflowHidden,
         styles.alignItemsCenter,
+        isInteractive && styles.userSelectNone,
         isSmallView ? styles.ph4 : styles.ph3,
         isSmallView && !isLoading && styles.pv4,
-        !isSmallView && !isLoading && styles.pv2,
+        !isSmallView && !isLoading && styles.pv3,
         isSmallView && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
         isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index 9a92ad9ad5fe..747215cd7863 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -82,11 +82,11 @@ function WorkspaceCompanyCardTableRow({
     isAssigningCardDisabled,
     onAssignCard,
 }: WorkspaceCompanyCardTableRowProps) {
-    const styles = useThemeStyles();
     const theme = useTheme();
+    const styles = useThemeStyles();
+    const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
-    const {isOffline} = useNetwork();
 
     const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, onDismissError} = item;
 
@@ -168,12 +168,12 @@ function WorkspaceCompanyCardTableRow({
                             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
                                 <TextWithTooltip
                                     text={leftColumnTitle}
-                                    style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter, !isAssigned && styles.cursorText]}
+                                    style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter]}
                                 />
                                 {!!leftColumnSubtitle && (
                                     <TextWithTooltip
                                         text={leftColumnSubtitle}
-                                        style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3, !isAssigned && styles.cursorText]}
+                                        style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
                                     />
                                 )}
                             </View>
@@ -183,7 +183,7 @@ function WorkspaceCompanyCardTableRow({
                             <View style={[styles.flex1]}>
                                 <Text
                                     numberOfLines={1}
-                                    style={[styles.lh16, styles.optionDisplayName, styles.pre, !isAssigned && styles.cursorText]}
+                                    style={[styles.lh16, styles.optionDisplayName, styles.pre]}
                                 >
                                     {formatMaskedCardName(cardName)}
                                 </Text>
@@ -193,7 +193,7 @@ function WorkspaceCompanyCardTableRow({
                         <View style={[styles.flex1]}>
                             <Text
                                 numberOfLines={1}
-                                style={[styles.lh16, styles.optionDisplayName, styles.pre, !isAssigned && styles.cursorText]}
+                                style={[styles.lh16, styles.optionDisplayName, styles.pre]}
                             >
                                 {customCardName}
                             </Text>
@@ -204,7 +204,7 @@ function WorkspaceCompanyCardTableRow({
                                 <Button
                                     small
                                     success
-                                    text={shouldUseNarrowTableLayout ? translate('workspace.companyCards.assign') : translate('workspace.companyCards.assignCard')}
+                                    text={translate('workspace.companyCards.assign')}
                                     onPress={handleRowPress}
                                     isDisabled={isAssigningCardDisabled}
                                 />

From 78145f466ac160b4bea70deec8138bfab3955add Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 09:07:56 -0400
Subject: [PATCH 24/43] update card icon size

---
 .../ReportActionAvatars/ReportActionAvatar.tsx | 11 ++++++++---
 src/components/ReportActionAvatars/index.tsx   |  5 +++++
 .../WorkspaceCompanyCardsTableRow.tsx          | 18 +++++++-----------
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/ReportActionAvatars/ReportActionAvatar.tsx b/src/components/ReportActionAvatars/ReportActionAvatar.tsx
index aad0061dfbc0..6e759ba70994 100644
--- a/src/components/ReportActionAvatars/ReportActionAvatar.tsx
+++ b/src/components/ReportActionAvatars/ReportActionAvatar.tsx
@@ -173,6 +173,10 @@ function ReportActionAvatarSubscript({
     fallbackDisplayName,
     useProfileNavigationWrapper,
     reportID,
+    subscriptCardFeedIconSize = {
+        width: variables.cardAvatarWidth,
+        height: variables.cardAvatarHeight,
+    },
 }: {
     primaryAvatar: IconType;
     secondaryAvatar: IconType;
@@ -181,6 +185,7 @@ function ReportActionAvatarSubscript({
     noRightMarginOnContainer?: boolean;
     subscriptAvatarBorderColor?: ColorValue;
     subscriptCardFeed?: CardFeed;
+    subscriptCardFeedIconSize?: {width: number; height: number};
     fallbackDisplayName?: string;
     useProfileNavigationWrapper?: boolean;
     reportID?: string;
@@ -274,15 +279,15 @@ function ReportActionAvatarSubscript({
                         // Nullish coalescing thinks that empty strings are truthy, thus I'm using OR operator
                         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                         StyleUtils.getBorderColorStyle(subscriptAvatarBorderColor || theme.sidebar),
-                        StyleUtils.getAvatarSubscriptIconContainerStyle(variables.cardAvatarWidth, variables.cardAvatarHeight),
+                        StyleUtils.getAvatarSubscriptIconContainerStyle(subscriptCardFeedIconSize.width, subscriptCardFeedIconSize.height),
                         styles.dFlex,
                         styles.justifyContentCenter,
                     ]}
                 >
                     <Icon
                         src={getCardFeedIcon(subscriptCardFeed, illustrations, companyCardFeedIcons)}
-                        width={variables.cardAvatarWidth}
-                        height={variables.cardAvatarHeight}
+                        width={subscriptCardFeedIconSize.width}
+                        height={subscriptCardFeedIconSize.height}
                         additionalStyles={styles.alignSelfCenter}
                         testID="ReportActionAvatars-Subscript-CardIcon"
                     />
diff --git a/src/components/ReportActionAvatars/index.tsx b/src/components/ReportActionAvatars/index.tsx
index 5f49c30b4c40..323b7b7e8844 100644
--- a/src/components/ReportActionAvatars/index.tsx
+++ b/src/components/ReportActionAvatars/index.tsx
@@ -59,6 +59,9 @@ type ReportActionAvatarsProps = {
     /** Subscript card feed to display instead of the second avatar */
     subscriptCardFeed?: CardFeed;
 
+    /** Size of the subscript card feed icon */
+    subscriptCardFeedIconSize?: {width: number; height: number};
+
     /** Whether we want to be redirected to profile on avatars click */
     useProfileNavigationWrapper?: boolean;
 
@@ -98,6 +101,7 @@ function ReportActionAvatars({
     subscriptAvatarBorderColor,
     noRightMarginOnSubscriptContainer = false,
     subscriptCardFeed,
+    subscriptCardFeedIconSize,
     secondaryAvatarContainerStyle,
     useMidSubscriptSizeForMultipleAvatars = false,
     isInReportAction = false,
@@ -165,6 +169,7 @@ function ReportActionAvatars({
                 noRightMarginOnContainer={noRightMarginOnSubscriptContainer}
                 subscriptAvatarBorderColor={subscriptAvatarBorderColor}
                 subscriptCardFeed={subscriptCardFeed}
+                subscriptCardFeedIconSize={subscriptCardFeedIconSize}
                 useProfileNavigationWrapper={useProfileNavigationWrapper}
                 fallbackDisplayName={fallbackDisplayName}
                 reportID={reportID}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index 747215cd7863..fe4bbebc8234 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -1,10 +1,10 @@
 import {Str} from 'expensify-common';
 import React from 'react';
 import {View} from 'react-native';
-import Avatar from '@components/Avatar';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ReportActionAvatars from '@components/ReportActionAvatars';
 import Table from '@components/Table';
 import Text from '@components/Text';
 import TextWithTooltip from '@components/TextWithTooltip';
@@ -16,7 +16,6 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {formatMaskedCardName, getCardFeedWithDomainID, lastFourNumbersFromCardName, splitMaskedCardNumber} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
-import {getDefaultAvatarURL} from '@libs/UserAvatarUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -150,15 +149,12 @@ function WorkspaceCompanyCardTableRow({
                     >
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
-                                <Avatar
-                                    source={
-                                        cardholder?.avatar ??
-                                        getDefaultAvatarURL({
-                                            accountID: cardholder?.accountID,
-                                        })
-                                    }
-                                    avatarID={cardholder?.accountID}
-                                    type={CONST.ICON_TYPE_AVATAR}
+                                <ReportActionAvatars
+                                    accountIDs={cardholder?.accountID ? [cardholder.accountID] : []}
+                                    subscriptCardFeed={assignedCard?.bank as CompanyCardFeed}
+                                    subscriptCardFeedIconSize={{height: 9, width: 14}}
+                                    subscriptAvatarBorderColor={hovered ? theme.hoverComponentBG : theme.highlightBG}
+                                    noRightMarginOnSubscriptContainer
                                     size={CONST.AVATAR_SIZE.SMALL}
                                 />
                             ) : (

From 52ad538063e5c04277fb13dd2c52584378bc4d7e Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 09:29:15 -0400
Subject: [PATCH 25/43] cleanup mobile styles

---
 .../WorkspaceCompanyCardsTableRow.tsx         | 73 ++++++++++---------
 .../WorkspaceCompanyCardsTable/index.tsx      |  7 +-
 src/styles/variables.ts                       |  4 +-
 3 files changed, 45 insertions(+), 39 deletions(-)

diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index fe4bbebc8234..ef0ea41d6c40 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -13,7 +13,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {formatMaskedCardName, getCardFeedWithDomainID, lastFourNumbersFromCardName, splitMaskedCardNumber} from '@libs/CardUtils';
+import {formatMaskedCardName, getCardFeedWithDomainID} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
@@ -50,9 +50,6 @@ type WorkspaceCompanyCardTableRowProps = {
     /** Whether to disable assign card button */
     isAssigningCardDisabled?: boolean;
 
-    /** Whether the card is a Plaid card feed */
-    isPlaidCardFeed: boolean;
-
     /** Whether to use narrow table row layout */
     shouldUseNarrowTableLayout: boolean;
 
@@ -74,7 +71,6 @@ function WorkspaceCompanyCardTableRow({
     item,
     policyID,
     CardFeedIcon,
-    isPlaidCardFeed,
     shouldUseNarrowTableLayout,
     columnCount,
     rowIndex,
@@ -89,19 +85,28 @@ function WorkspaceCompanyCardTableRow({
 
     const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, onDismissError} = item;
 
-    const lastCardNumbers = isPlaidCardFeed ? lastFourNumbersFromCardName(cardName) : splitMaskedCardNumber(cardName)?.lastDigits;
+    const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+
+    const formattedCustomCardName = customCardName ?? '';
+    const formattedCardDetails = formatMaskedCardName(cardName);
+    const formattedCustomCardNameSuffix = formattedCustomCardName ? ` • ${formattedCustomCardName}` : '';
+
     const cardholderLoginText = !shouldUseNarrowTableLayout && isAssigned ? Str.removeSMSDomain(cardholder?.login ?? '') : undefined;
-    const narrowWidthCardName = isAssigned ? `${customCardName ?? ''}${lastCardNumbers ? ` - ${lastCardNumbers}` : ''}` : cardName;
+    const narrowWidthCardName = isAssigned ? `${formattedCardDetails}${formattedCustomCardNameSuffix}` : cardName;
 
-    const leftColumnTitle = isAssigned ? Str.removeSMSDomain(cardholder?.displayName ?? '') : translate('workspace.moreFeatures.companyCards.unassignedCards');
-    const leftColumnSubtitle = shouldUseNarrowTableLayout ? narrowWidthCardName : cardholderLoginText;
-    const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const memberColumnTitle = isAssigned ? Str.removeSMSDomain(cardholder?.displayName ?? '') : translate('workspace.moreFeatures.companyCards.unassignedCards');
+    const memberCardSubtitle = shouldUseNarrowTableLayout ? narrowWidthCardName : cardholderLoginText;
 
     const reasonAttributes: SkeletonSpanReasonAttributes = {
         context: 'WorkspaceCompanyCardsTableItem',
         isDeleting,
     };
 
+    const avatarSize = shouldUseNarrowTableLayout ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.SMALL;
+    const subscriptCardFeedIconSize = shouldUseNarrowTableLayout
+        ? {width: variables.cardAvatarWidth, height: variables.cardAvatarHeight}
+        : {width: variables.cardAvatarWidthSmall, height: variables.cardAvatarHeightSmall};
+
     const handleRowPress = () => {
         if (!assignedCard) {
             onAssignCard(cardName, encryptedCardNumber);
@@ -150,12 +155,12 @@ function WorkspaceCompanyCardTableRow({
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
                                 <ReportActionAvatars
+                                    noRightMarginOnSubscriptContainer
+                                    size={avatarSize}
                                     accountIDs={cardholder?.accountID ? [cardholder.accountID] : []}
                                     subscriptCardFeed={assignedCard?.bank as CompanyCardFeed}
-                                    subscriptCardFeedIconSize={{height: 9, width: 14}}
+                                    subscriptCardFeedIconSize={subscriptCardFeedIconSize}
                                     subscriptAvatarBorderColor={hovered ? theme.hoverComponentBG : theme.highlightBG}
-                                    noRightMarginOnSubscriptContainer
-                                    size={CONST.AVATAR_SIZE.SMALL}
                                 />
                             ) : (
                                 CardFeedIcon
@@ -163,12 +168,12 @@ function WorkspaceCompanyCardTableRow({
 
                             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
                                 <TextWithTooltip
-                                    text={leftColumnTitle}
+                                    text={memberColumnTitle}
                                     style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter]}
                                 />
-                                {!!leftColumnSubtitle && (
+                                {!!memberCardSubtitle && (
                                     <TextWithTooltip
-                                        text={leftColumnSubtitle}
+                                        text={memberCardSubtitle}
                                         style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
                                     />
                                 )}
@@ -181,19 +186,21 @@ function WorkspaceCompanyCardTableRow({
                                     numberOfLines={1}
                                     style={[styles.lh16, styles.optionDisplayName, styles.pre]}
                                 >
-                                    {formatMaskedCardName(cardName)}
+                                    {formattedCardDetails}
                                 </Text>
                             </View>
                         )}
 
-                        <View style={[styles.flex1]}>
-                            <Text
-                                numberOfLines={1}
-                                style={[styles.lh16, styles.optionDisplayName, styles.pre]}
-                            >
-                                {customCardName}
-                            </Text>
-                        </View>
+                        {!shouldUseNarrowTableLayout && (
+                            <View style={[styles.flex1]}>
+                                <Text
+                                    numberOfLines={1}
+                                    style={[styles.lh16, styles.optionDisplayName, styles.pre]}
+                                >
+                                    {customCardName}
+                                </Text>
+                            </View>
+                        )}
 
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap3]}>
                             {!isAssigned && (
@@ -206,15 +213,13 @@ function WorkspaceCompanyCardTableRow({
                                 />
                             )}
 
-                            <View style={[styles.flexRow, styles.ml2, styles.gap3, styles.mw100]}>
-                                <Icon
-                                    src={Expensicons.ArrowRight}
-                                    fill={theme.icon}
-                                    additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
-                                    width={variables.iconSizeNormal}
-                                    height={variables.iconSizeNormal}
-                                />
-                            </View>
+                            <Icon
+                                src={Expensicons.ArrowRight}
+                                fill={theme.icon}
+                                additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
+                                width={variables.iconSizeNormal}
+                                height={variables.iconSizeNormal}
+                            />
                         </View>
                     </View>
                 )}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 1ed212da93e9..932adaf6290a 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -18,7 +18,7 @@ import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
-import {getDefaultCardName, getPlaidInstitutionId} from '@libs/CardUtils';
+import {getDefaultCardName} from '@libs/CardUtils';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import tokenizedSearch from '@libs/tokenizedSearch';
 import WorkspaceCompanyCardPageEmptyState from '@pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState';
@@ -275,9 +275,9 @@ function WorkspaceCompanyCardsTable({
         <CardFeedIcon
             key={feedName}
             iconProps={{
-                height: variables.cardIconSmallHeight,
-                width: variables.cardIconSmallWidth,
                 additionalStyles: styles.cardIcon,
+                width: shouldUseNarrowTableLayout ? variables.cardIconWidth : variables.cardIconSmallWidth,
+                height: shouldUseNarrowTableLayout ? variables.cardIconHeight : variables.cardIconSmallHeight,
             }}
             selectedFeed={feedName}
             useSkeletonLoader
@@ -291,7 +291,6 @@ function WorkspaceCompanyCardsTable({
             rowIndex={index}
             policyID={policyID ?? String(CONST.DEFAULT_NUMBER_ID)}
             CardFeedIcon={cardFeedIcon}
-            isPlaidCardFeed={!!getPlaidInstitutionId(feedName)}
             onAssignCard={onAssignCard}
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 7f8711025bb8..5a063d420a91 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -122,7 +122,7 @@ export default {
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
     tableRowHeight: 56,
-    tableRowHeightCompact: 64,
+    tableRowHeightCompact: 72,
     tableRowPaddingVertical: 8,
     tableRowPaddingHorizontal: 12,
     tableGroupRowPaddingVertical: 4,
@@ -307,6 +307,8 @@ export default {
 
     cardAvatarWidth: 20,
     cardAvatarHeight: 13,
+    cardAvatarWidthSmall: 14,
+    cardAvatarHeightSmall: 9,
 
     cardNameWidth: 156,
     updateAnimationW: 390,

From 55dd4873b4b8f926f679ee4ade0c1ba6b64ed8e4 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 09:34:20 -0400
Subject: [PATCH 26/43] update to address comments

---
 src/components/Table/TableRow.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 352d42f530f8..3d8eac5e2906 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -6,6 +6,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
@@ -27,10 +28,12 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
     LoadingComponent?: React.ComponentType;
 
     /** The reason attributes if the table row is loading */
-    skeletonReasonAttributes?: SkeletonSpanReasonAttributes;
+    skeletonReasonAttributes: SkeletonSpanReasonAttributes;
 };
 
 export default function TableRow({children, accessible, rowIndex, sentryLabel, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
+    useSkeletonSpan('TableRowSkeleton', skeletonReasonAttributes);
+
     const theme = useTheme();
     const styles = useThemeStyles();
     const {processedData} = useTableContext();
@@ -59,7 +62,7 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
 
     return (
         <PressableWithFeedback
-            accessible
+            accessible={accessible}
             accessibilityLabel="row"
             style={tableRowStyles}
             sentryLabel={sentryLabel}

From 0cf288aec07cb62d8b1cc7ada07b22848dc05688 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 09:41:11 -0400
Subject: [PATCH 27/43] fix bot comments

---
 .../Tables/WorkspaceCompanyCardsTable/index.tsx | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 932adaf6290a..e975322aff88 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -1,5 +1,5 @@
 import type {ListRenderItemInfo} from '@shopify/flash-list';
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import Button from '@components/Button';
@@ -348,15 +348,12 @@ function WorkspaceCompanyCardsTable({
         isLoadingCards,
     };
 
-    const LoadingComponent = useMemo(
-        () => (
-            <TableSkeleton
-                rowCount={5}
-                reasonAttributes={reasonAttributes}
-                renderSkeletonItem={WorkspaceCompanyCardsTableSkeleton}
-            />
-        ),
-        [reasonAttributes],
+    const LoadingComponent = (
+        <TableSkeleton
+            rowCount={5}
+            reasonAttributes={reasonAttributes}
+            renderSkeletonItem={WorkspaceCompanyCardsTableSkeleton}
+        />
     );
 
     return (

From 6b1ec03f0898dd42e816edebce03a2b32773b919 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 11:46:04 -0400
Subject: [PATCH 28/43] fix style feedback

---
 .../WorkspaceCompanyCardsTableRow.tsx                         | 2 +-
 src/components/Tables/WorkspaceCompanyCardsTable/index.tsx    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index ef0ea41d6c40..7c0e20b95872 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -166,7 +166,7 @@ function WorkspaceCompanyCardTableRow({
                                 CardFeedIcon
                             )}
 
-                            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch]}>
+                            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, shouldUseNarrowTableLayout && styles.gap1]}>
                                 <TextWithTooltip
                                     text={memberColumnTitle}
                                     style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter]}
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index e975322aff88..37ae66e95c55 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -190,6 +190,7 @@ function WorkspaceCompanyCardsTable({
     const tableBodyContentContainerStyle = useBottomSafeSafeAreaPaddingStyle({
         addBottomSafeAreaPadding: true,
         addOfflineIndicatorBottomSafeAreaPadding: true,
+        style: styles.pb4,
     });
 
     const compareItems: CompareItemsCallback<WorkspaceCompanyCardTableItemData, CompanyCardsTableColumnKey> = (a, b, activeSorting) => {
@@ -301,6 +302,7 @@ function WorkspaceCompanyCardsTable({
     const [activeSortingInWideLayout, setActiveSortingInWideLayout] = useState<ActiveSorting<CompanyCardsTableColumnKey> | undefined>(undefined);
     const isNarrowLayoutRef = useRef(shouldUseNarrowTableLayout);
     const shouldRenderHeaderAsChild = !shouldUseNarrowTableLayout || ((isFeedPending || isLoadingPage) && !showCards);
+
     // When we switch from wide to narrow layout, we want to save the active sorting and set it to the member column.
     // When switching back to wide layout, we want to restore the previous sorting.
     useEffect(() => {
@@ -331,7 +333,7 @@ function WorkspaceCompanyCardsTable({
     });
 
     const headerButtonsComponent = showTableHeaderButtons ? (
-        <View style={shouldUseNarrowTableLayout && styles.mb5}>
+        <View style={styles.mb3}>
             <WorkspaceCompanyCardsTableHeaderButtons
                 isLoading={isLoading}
                 policyID={policyID}

From 7a35d7f2459e264c9e2adae0ae331c2a42a0db1f Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Fri, 8 May 2026 12:27:02 -0400
Subject: [PATCH 29/43] update table header to support a title element

---
 src/components/Table/Table.tsx                |  7 ++++
 src/components/Table/TableContext.tsx         |  7 ++++
 src/components/Table/TableHeader.tsx          | 34 ++++++++++++++-----
 src/components/Table/TableRow.tsx             |  2 --
 src/components/Table/types.ts                 |  3 ++
 .../WorkspaceCompanyCardsTable/index.tsx      | 21 +++++++-----
 6 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
index ff12d8f59b57..8c280a8c6cfc 100644
--- a/src/components/Table/Table.tsx
+++ b/src/components/Table/Table.tsx
@@ -1,5 +1,6 @@
 import type {FlashListRef} from '@shopify/flash-list';
 import React, {useImperativeHandle, useRef} from 'react';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useFiltering from './middlewares/filtering';
 import useSearching from './middlewares/searching';
 import useSorting from './middlewares/sorting';
@@ -130,6 +131,7 @@ import type {TableHandle, TableMethods, TableProps} from './types';
  */
 function Table<T, ColumnKey extends string = string, FilterKey extends string = string>({
     ref,
+    title,
     data = [],
     columns,
     filters,
@@ -144,6 +146,8 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
         throw new Error('Table columns must be provided');
     }
 
+    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+
     const {middleware: filterMiddleware, currentFilters, methods: filterMethods} = useFiltering<T, FilterKey>({filters, isItemInFilter});
 
     const {middleware: searchMiddleware, activeSearchString, methods: searchMethods} = useSearching<T>({isItemInSearch});
@@ -177,6 +181,7 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
     });
 
     const originalDataLength = data?.length ?? 0;
+    const shouldUseNarrowTableLayout = shouldUseNarrowLayout || isMediumScreenWidth;
 
     // Check if filters are applied (not default values)
     const hasActiveFilters = filters
@@ -192,6 +197,7 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
 
     // eslint-disable-next-line react/jsx-no-constructed-context-values
     const contextValue: TableContextValue<T, ColumnKey, FilterKey> = {
+        title,
         listRef,
         listProps,
         processedData,
@@ -205,6 +211,7 @@ function Table<T, ColumnKey extends string = string, FilterKey extends string =
         hasActiveFilters,
         hasSearchString,
         isEmptyResult,
+        shouldUseNarrowTableLayout,
     };
 
     return <TableContext.Provider value={contextValue as unknown as TableContextValue<unknown, string>}>{children}</TableContext.Provider>;
diff --git a/src/components/Table/TableContext.tsx b/src/components/Table/TableContext.tsx
index 136b21f43413..6d83062e2716 100644
--- a/src/components/Table/TableContext.tsx
+++ b/src/components/Table/TableContext.tsx
@@ -12,6 +12,9 @@ import type {SharedListProps, TableColumn, TableMethods} from './types';
  * @template ColumnKey - A string literal type representing the valid column keys.
  */
 type TableContextValue<T, ColumnKey extends string = string, FilterKey extends string = string> = {
+    /** The title of the table when shown on smaller screens. */
+    title?: string;
+
     /** Reference to the underlying FlashList for programmatic control. */
     listRef: React.RefObject<FlashListRef<T> | null>;
 
@@ -50,6 +53,9 @@ type TableContextValue<T, ColumnKey extends string = string, FilterKey extends s
 
     /** Whether the table has an empty result caused by search or filters. */
     isEmptyResult: boolean;
+
+    /** Whether to use a narrow layout (e.g. on mobile screens). */
+    shouldUseNarrowTableLayout: boolean;
 };
 
 const defaultTableContextValue: TableContextValue<unknown, string> = {
@@ -69,6 +75,7 @@ const defaultTableContextValue: TableContextValue<unknown, string> = {
     hasActiveFilters: false,
     hasSearchString: false,
     isEmptyResult: false,
+    shouldUseNarrowTableLayout: false,
 };
 
 const TableContext = createContext(defaultTableContextValue);
diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index a248dbfce168..2b16784eefa3 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -50,8 +50,13 @@ type TableHeaderProps = ViewProps & {
  * ```
  */
 function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHeaderWhenEmptySearch = true, ...props}: TableHeaderProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
-    const {columns, isEmptyResult} = useTableContext<T, ColumnKey>();
+    const {columns, isEmptyResult, title, shouldUseNarrowTableLayout} = useTableContext<T, ColumnKey>();
+
+    if (shouldUseNarrowTableLayout && !title) {
+        return null;
+    }
 
     if (shouldHideHeaderWhenEmptySearch && isEmptyResult) {
         return null;
@@ -78,14 +83,25 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            {columns.map((column) => {
-                return (
-                    <TableHeaderColumn
-                        column={column}
-                        key={column.key}
-                    />
-                );
-            })}
+            {shouldUseNarrowTableLayout && (
+                <Text
+                    numberOfLines={1}
+                    color={theme.textSupporting}
+                    style={[styles.lh16, styles.textMicroSupporting, styles.pr1]}
+                >
+                    {title}
+                </Text>
+            )}
+
+            {!shouldUseNarrowTableLayout &&
+                columns.map((column) => {
+                    return (
+                        <TableHeaderColumn
+                            column={column}
+                            key={column.key}
+                        />
+                    );
+                })}
         </View>
     );
 }
diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 3d8eac5e2906..3eef375cf2e3 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -40,7 +40,6 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
 
     const rowCount = processedData.length;
-    const isFirstRow = rowIndex === 0;
     const isLastRow = rowIndex === rowCount - 1;
     const isInteractive = interactive && !isLoading;
     const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
@@ -55,7 +54,6 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
         isSmallView ? styles.ph4 : styles.ph3,
         isSmallView && !isLoading && styles.pv4,
         !isSmallView && !isLoading && styles.pv3,
-        isSmallView && isFirstRow && styles.tableTopRadius,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
         isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
index d3e9c5151320..39f32d7e6359 100644
--- a/src/components/Table/types.ts
+++ b/src/components/Table/types.ts
@@ -105,6 +105,9 @@ type ToggleSortingCallback<ColumnKey extends string = string> = (columnKey?: Col
  */
 type TableProps<T, ColumnKey extends string = string, FilterKey extends string = string> = SharedListProps<T> &
     PropsWithChildren<{
+        /** The title for the table when shown on smaller screens */
+        title?: string;
+
         /** Array of data items to display in the table. */
         data: T[] | undefined;
 
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 37ae66e95c55..5998427e6afd 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -358,22 +358,30 @@ function WorkspaceCompanyCardsTable({
         />
     );
 
+    const ListHeader = (
+        <>
+            {headerButtonsComponent}
+            {!isLoadingFeed && showCards && <Table.Header />}
+        </>
+    );
+
     return (
         <Table
             ref={tableRef}
             data={cardsData}
             columns={columns}
+            filters={filterConfig}
             renderItem={renderItem}
             keyExtractor={keyExtractor}
             compareItems={compareItems}
             isItemInSearch={isItemInSearch}
             isItemInFilter={isItemInFilter}
-            filters={filterConfig}
             initialSortColumn="member"
+            title={translate('workspace.common.companyCards')}
             ListEmptyComponent={isLoadingCards ? LoadingComponent : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
-            ListHeaderComponent={shouldUseNarrowTableLayout ? headerButtonsComponent : undefined}
+            ListHeaderComponent={!shouldRenderHeaderAsChild ? ListHeader : undefined}
         >
-            {shouldRenderHeaderAsChild && headerButtonsComponent}
+            {shouldRenderHeaderAsChild && ListHeader}
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
@@ -418,12 +426,7 @@ function WorkspaceCompanyCardsTable({
                 </ScrollView>
             )}
 
-            {showCards && (
-                <>
-                    {!shouldUseNarrowTableLayout && !isLoadingFeed && <Table.Header />}
-                    <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />
-                </>
-            )}
+            {showCards && <Table.Body contentContainerStyle={tableBodyContentContainerStyle} />}
         </Table>
     );
 }

From 9e6bf0dfe0198c32a309fbc397b631ce3415c811 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 08:33:46 -0400
Subject: [PATCH 30/43] fix deleted disabling

---
 .../WorkspaceCompanyCardsTableRow.tsx                          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index 7c0e20b95872..f8bd88e25f3c 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -83,7 +83,7 @@ function WorkspaceCompanyCardTableRow({
     const {translate} = useLocalize();
     const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']);
 
-    const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, onDismissError} = item;
+    const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, isCardDeleted, onDismissError} = item;
 
     const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
@@ -135,6 +135,7 @@ function WorkspaceCompanyCardTableRow({
                 interactive
                 rowIndex={rowIndex}
                 isLoading={isDeleting}
+                disabled={isCardDeleted}
                 skeletonReasonAttributes={reasonAttributes}
                 sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
                 LoadingComponent={WorkspaceCompanyCardsTableSkeleton}

From d72b409342b8c90edae1759a121e8a8d60cc4876 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 08:36:23 -0400
Subject: [PATCH 31/43] update padding values

---
 src/components/Table/TableHeader.tsx | 13 +++++++++++--
 src/styles/index.ts                  |  4 ++++
 src/styles/variables.ts              |  1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index 2b16784eefa3..6cea0d9b3649 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -65,7 +65,8 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
     return (
         <View
             style={[
-                styles.p3,
+                styles.pv2,
+                styles.ph3,
                 styles.mh5,
                 styles.highlightBG,
                 styles.borderBottom,
@@ -141,13 +142,21 @@ function TableHeaderColumn<T, ColumnKey extends string = string>({column}: {colu
         toggleColumnSorting(columnKey);
     };
 
+    const tableHeaderStyles = [
+        styles.flexRow,
+        styles.alignItemsCenter,
+        styles.tableHeaderContentHeight,
+        column.styling?.flex ? {flex: column.styling.flex} : styles.flex1,
+        column.styling?.containerStyles,
+    ];
+
     return (
         <PressableWithFeedback
             accessible
             accessibilityLabel={column.label}
             accessibilityRole="button"
             sentryLabel={CONST.SENTRY_LABEL.TABLE_HEADER.SORTABLE_COLUMN}
-            style={[styles.flexRow, styles.alignItemsCenter, column.styling?.flex ? {flex: column.styling.flex} : styles.flex1, column.styling?.containerStyles]}
+            style={tableHeaderStyles}
             onPress={() => toggleSorting(column.key)}
         >
             <Text
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 076029d42dc8..2eb4cb150990 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2541,6 +2541,10 @@ const staticStyles = (theme: ThemeColors) =>
             minHeight: variables.tableRowHeight,
         },
 
+        tableHeaderContentHeight: {
+            minHeight: variables.tableHeaderContentHeight,
+        },
+
         borderBottom: {
             borderBottomWidth: 1,
             borderColor: theme.border,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 7008f203b9f2..f458dc2507bd 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -123,6 +123,7 @@ export default {
     gutterWidth: 12,
     optionRowHeight: 64,
     optionRowHeightCompact: 52,
+    tableHeaderContentHeight: 20,
     tableRowHeight: 56,
     tableRowHeightCompact: 72,
     tableRowPaddingVertical: 8,

From 938deacb4b7ab7b46afa3422bdff4c10497a007a Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 08:53:37 -0400
Subject: [PATCH 32/43] fix table hbeader

---
 src/components/Table/TableHeader.tsx                     | 2 +-
 .../Tables/WorkspaceCompanyCardsTable/index.tsx          | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Table/TableHeader.tsx b/src/components/Table/TableHeader.tsx
index 6cea0d9b3649..b0d94614b6bc 100644
--- a/src/components/Table/TableHeader.tsx
+++ b/src/components/Table/TableHeader.tsx
@@ -78,7 +78,7 @@ function TableHeader<T, ColumnKey extends string = string>({style, shouldHideHea
                 styles.gap3,
                 // Use Grid on web when available (will override flex if supported)
                 styles.dGrid,
-                {gridTemplateColumns: `repeat(${columns.length}, 1fr)`},
+                !shouldUseNarrowTableLayout && {gridTemplateColumns: `repeat(${columns.length}, 1fr)`},
                 style,
             ]}
             // eslint-disable-next-line react/jsx-props-no-spreading
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index 5998427e6afd..deaffd6039a8 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -299,9 +299,8 @@ function WorkspaceCompanyCardsTable({
         />
     );
 
-    const [activeSortingInWideLayout, setActiveSortingInWideLayout] = useState<ActiveSorting<CompanyCardsTableColumnKey> | undefined>(undefined);
     const isNarrowLayoutRef = useRef(shouldUseNarrowTableLayout);
-    const shouldRenderHeaderAsChild = !shouldUseNarrowTableLayout || ((isFeedPending || isLoadingPage) && !showCards);
+    const [activeSortingInWideLayout, setActiveSortingInWideLayout] = useState<ActiveSorting<CompanyCardsTableColumnKey> | undefined>(undefined);
 
     // When we switch from wide to narrow layout, we want to save the active sorting and set it to the member column.
     // When switching back to wide layout, we want to restore the previous sorting.
@@ -361,7 +360,7 @@ function WorkspaceCompanyCardsTable({
     const ListHeader = (
         <>
             {headerButtonsComponent}
-            {!isLoadingFeed && showCards && <Table.Header />}
+            {!isLoadingFeed && !isFeedPending && showCards && <Table.Header />}
         </>
     );
 
@@ -378,10 +377,10 @@ function WorkspaceCompanyCardsTable({
             isItemInFilter={isItemInFilter}
             initialSortColumn="member"
             title={translate('workspace.common.companyCards')}
+            ListHeaderComponent={shouldUseNarrowTableLayout ? ListHeader : undefined}
             ListEmptyComponent={isLoadingCards ? LoadingComponent : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
-            ListHeaderComponent={!shouldRenderHeaderAsChild ? ListHeader : undefined}
         >
-            {shouldRenderHeaderAsChild && ListHeader}
+            {!shouldUseNarrowTableLayout && ListHeader}
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>

From fed65378dc0cb8004276792fb5e7f03276f701c7 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 09:03:11 -0400
Subject: [PATCH 33/43] fix unit tests

---
 tests/ui/TableTest.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/tests/ui/TableTest.tsx b/tests/ui/TableTest.tsx
index 92b822c735b1..9459ac436a5d 100644
--- a/tests/ui/TableTest.tsx
+++ b/tests/ui/TableTest.tsx
@@ -51,6 +51,8 @@ jest.mock('@hooks/useThemeStyles', () =>
         pb5: {},
         textNormal: {},
         colorMuted: {},
+        getSelectionListPopoverHeight: jest.fn(() => ({})),
+        ml3: {marginLeft: 0},
     })),
 );
 
@@ -79,6 +81,15 @@ jest.mock('@components/Icon', () => {
     return MockIcon;
 });
 
+// Mock the responsive hook so that we are rendering in web mode
+jest.mock('@hooks/useResponsiveLayout', () => ({
+    __esModule: true,
+    default: () => ({
+        shouldUseNarrowLayout: false,
+        isMediumScreenWidth: false,
+    }),
+}));
+
 // Mock TextInput component
 jest.mock('@components/TextInput', () => {
     // eslint-disable-next-line @typescript-eslint/consistent-type-imports

From f4f47bc90c839618717cdd2f23f8ef9fa7014ded Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 10:15:22 -0400
Subject: [PATCH 34/43] add more s tyles to the table row component

---
 src/components/Table/TableRow.tsx             | 61 ++++++++++++-------
 .../WorkspaceCompanyCardsTableRow.tsx         | 28 +--------
 .../WorkspaceCompanyCardsTable/index.tsx      |  1 -
 3 files changed, 43 insertions(+), 47 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 3eef375cf2e3..e5106a8313ef 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
+import {PressableStateCallbackType, View} from 'react-native';
 import type {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
@@ -36,33 +36,50 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
 
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {processedData} = useTableContext();
-    const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
+    const {processedData, columns, shouldUseNarrowTableLayout} = useTableContext();
 
+    const columnCount = columns.length;
     const rowCount = processedData.length;
     const isLastRow = rowIndex === rowCount - 1;
     const isInteractive = interactive && !isLoading;
-    const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
 
-    const tableRowStyles = [
+    const tableRowPressableStyles = [
         styles.mh5,
         styles.flexRow,
         styles.highlightBG,
         styles.overflowHidden,
         styles.alignItemsCenter,
         isInteractive && styles.userSelectNone,
-        isSmallView ? styles.ph4 : styles.ph3,
-        isSmallView && !isLoading && styles.pv4,
-        !isSmallView && !isLoading && styles.pv3,
+        shouldUseNarrowTableLayout ? styles.ph4 : styles.ph3,
+        shouldUseNarrowTableLayout && !isLoading && styles.pv4,
+        !shouldUseNarrowTableLayout && !isLoading && styles.pv3,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
-        isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight,
+        shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];
 
+    const tableRowContentStyles = [
+        styles.flex1,
+        styles.flexRow,
+        styles.alignItemsCenter,
+        styles.gap3,
+        styles.dFlex,
+        // Use Grid on web when available (will override flex if supported)
+        !shouldUseNarrowTableLayout && [styles.dGrid, {gridTemplateColumns: `repeat(${columnCount}, 1fr)`}],
+    ];
+
+    const renderChildren = (state: PressableStateCallbackType) => {
+        if (typeof children === 'function') {
+            return children(state);
+        }
+
+        return children;
+    };
+
     return (
         <PressableWithFeedback
             accessible={accessible}
             accessibilityLabel="row"
-            style={tableRowStyles}
+            style={tableRowPressableStyles}
             sentryLabel={sentryLabel}
             interactive={isInteractive}
             pressDimmingValue={isInteractive ? undefined : 1}
@@ -72,17 +89,19 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
-            {!!isLoading && LoadingComponent ? (
-                <SkeletonViewContentLoader
-                    backgroundColor={theme.skeletonLHNIn}
-                    foregroundColor={theme.skeletonLHNOut}
-                    height={isSmallView ? variables.tableRowHeightCompact : variables.tableRowHeight}
-                >
-                    <LoadingComponent />
-                </SkeletonViewContentLoader>
-            ) : (
-                children
-            )}
+            {(state) =>
+                !!isLoading && LoadingComponent ? (
+                    <SkeletonViewContentLoader
+                        backgroundColor={theme.skeletonLHNIn}
+                        foregroundColor={theme.skeletonLHNOut}
+                        height={shouldUseNarrowTableLayout ? variables.tableRowHeightCompact : variables.tableRowHeight}
+                    >
+                        <LoadingComponent />
+                    </SkeletonViewContentLoader>
+                ) : (
+                    <View style={tableRowContentStyles}>{renderChildren(state)}</View>
+                )
+            }
         </PressableWithFeedback>
     );
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index f8bd88e25f3c..4d0c1d9a3603 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -53,9 +53,6 @@ type WorkspaceCompanyCardTableRowProps = {
     /** Whether to use narrow table row layout */
     shouldUseNarrowTableLayout: boolean;
 
-    /** Number of columns in the table */
-    columnCount: number;
-
     /** The index of the row */
     rowIndex: number;
 
@@ -67,16 +64,7 @@ type WorkspaceCompanyCardTableRowProps = {
     onAssignCard: (cardName: string, cardID: string) => void;
 };
 
-function WorkspaceCompanyCardTableRow({
-    item,
-    policyID,
-    CardFeedIcon,
-    shouldUseNarrowTableLayout,
-    columnCount,
-    rowIndex,
-    isAssigningCardDisabled,
-    onAssignCard,
-}: WorkspaceCompanyCardTableRowProps) {
+function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNarrowTableLayout, rowIndex, isAssigningCardDisabled, onAssignCard}: WorkspaceCompanyCardTableRowProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
@@ -142,17 +130,7 @@ function WorkspaceCompanyCardTableRow({
                 onPress={handleRowPress}
             >
                 {({hovered}) => (
-                    <View
-                        style={[
-                            styles.flex1,
-                            styles.flexRow,
-                            styles.alignItemsCenter,
-                            styles.gap3,
-                            styles.dFlex,
-                            // Use Grid on web when available (will override flex if supported)
-                            !shouldUseNarrowTableLayout && [styles.dGrid, {gridTemplateColumns: `repeat(${columnCount}, 1fr)`}],
-                        ]}
-                    >
+                    <>
                         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                             {isAssigned ? (
                                 <ReportActionAvatars
@@ -222,7 +200,7 @@ function WorkspaceCompanyCardTableRow({
                                 height={variables.iconSizeNormal}
                             />
                         </View>
-                    </View>
+                    </>
                 )}
             </Table.Row>
         </OfflineWithFeedback>
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
index deaffd6039a8..52cdd0f9b14f 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx
@@ -295,7 +295,6 @@ function WorkspaceCompanyCardsTable({
             onAssignCard={onAssignCard}
             isAssigningCardDisabled={isAssigningCardDisabled}
             shouldUseNarrowTableLayout={shouldUseNarrowTableLayout}
-            columnCount={columns.length}
         />
     );
 

From b5b77f2d3bfb2df8ba874039858095b10d8105f7 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Mon, 11 May 2026 11:40:12 -0400
Subject: [PATCH 35/43] fix lint

---
 src/components/Table/TableRow.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index e5106a8313ef..8973e832ed58 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import {PressableStateCallbackType, View} from 'react-native';
+import type {PressableStateCallbackType} from 'react-native';
+import {View} from 'react-native';
 import type {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';

From b5c5c1fbdedf670953b3df9a60f0195feb3de95f Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 12 May 2026 08:20:44 -0400
Subject: [PATCH 36/43] fix offline deletion

---
 src/components/Table/TableRow.tsx             |  75 +++++---
 .../WorkspaceCompanyCardsTableRow.tsx         | 164 +++++++++---------
 tests/ui/TableTest.tsx                        |   2 +-
 3 files changed, 128 insertions(+), 113 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 8973e832ed58..a7de29692f6a 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import type {PressableStateCallbackType} from 'react-native';
 import {View} from 'react-native';
+import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import type {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
@@ -30,9 +32,24 @@ type TableRowProps = Omit<PressableWithFeedbackProps, 'accessible'> & {
 
     /** The reason attributes if the table row is loading */
     skeletonReasonAttributes: SkeletonSpanReasonAttributes;
+
+    /** Attributes for when the client is offline and there is an error related to the table row */
+    offlineWithFeedback?: OfflineWithFeedbackProps;
 };
 
-export default function TableRow({children, accessible, rowIndex, sentryLabel, interactive, isLoading, skeletonReasonAttributes, LoadingComponent, onPress, ...props}: TableRowProps) {
+export default function TableRow({
+    children,
+    accessible,
+    rowIndex,
+    sentryLabel,
+    interactive,
+    isLoading,
+    skeletonReasonAttributes,
+    LoadingComponent,
+    onPress,
+    offlineWithFeedback,
+    ...props
+}: TableRowProps) {
     useSkeletonSpan('TableRowSkeleton', skeletonReasonAttributes);
 
     const theme = useTheme();
@@ -77,32 +94,38 @@ export default function TableRow({children, accessible, rowIndex, sentryLabel, i
     };
 
     return (
-        <PressableWithFeedback
-            accessible={accessible}
-            accessibilityLabel="row"
-            style={tableRowPressableStyles}
-            sentryLabel={sentryLabel}
-            interactive={isInteractive}
-            pressDimmingValue={isInteractive ? undefined : 1}
-            hoverStyle={isInteractive && styles.hoveredComponentBG}
-            role={isInteractive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
-            onPress={onPress}
+        <OfflineWithFeedback
+            // We need to spread the props due to how the OfflineWithFeedback component handles child components
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
+            {...offlineWithFeedback}
         >
-            {(state) =>
-                !!isLoading && LoadingComponent ? (
-                    <SkeletonViewContentLoader
-                        backgroundColor={theme.skeletonLHNIn}
-                        foregroundColor={theme.skeletonLHNOut}
-                        height={shouldUseNarrowTableLayout ? variables.tableRowHeightCompact : variables.tableRowHeight}
-                    >
-                        <LoadingComponent />
-                    </SkeletonViewContentLoader>
-                ) : (
-                    <View style={tableRowContentStyles}>{renderChildren(state)}</View>
-                )
-            }
-        </PressableWithFeedback>
+            <PressableWithFeedback
+                accessible={accessible}
+                accessibilityLabel="row"
+                style={tableRowPressableStyles}
+                sentryLabel={sentryLabel}
+                interactive={isInteractive}
+                pressDimmingValue={isInteractive ? undefined : 1}
+                hoverStyle={isInteractive && styles.hoveredComponentBG}
+                role={isInteractive ? CONST.ROLE.BUTTON : CONST.ROLE.PRESENTATION}
+                onPress={onPress}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            >
+                {(state) =>
+                    !!isLoading && LoadingComponent ? (
+                        <SkeletonViewContentLoader
+                            backgroundColor={theme.skeletonLHNIn}
+                            foregroundColor={theme.skeletonLHNOut}
+                            height={shouldUseNarrowTableLayout ? variables.tableRowHeightCompact : variables.tableRowHeight}
+                        >
+                            <LoadingComponent />
+                        </SkeletonViewContentLoader>
+                    ) : (
+                        <View style={tableRowContentStyles}>{renderChildren(state)}</View>
+                    )
+                }
+            </PressableWithFeedback>
+        </OfflineWithFeedback>
     );
 }
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index 4d0c1d9a3603..e21a3f00e804 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {View} from 'react-native';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ReportActionAvatars from '@components/ReportActionAvatars';
 import Table from '@components/Table';
 import Text from '@components/Text';
@@ -112,98 +111,91 @@ function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNa
     };
 
     return (
-        <OfflineWithFeedback
-            errorRowStyles={[styles.ph5, styles.mb4]}
-            errors={errors}
-            pendingAction={pendingAction}
-            onClose={onDismissError}
-            shouldHideOnDelete={false}
+        <Table.Row
+            interactive
+            rowIndex={rowIndex}
+            isLoading={isDeleting}
+            disabled={isCardDeleted}
+            skeletonReasonAttributes={reasonAttributes}
+            sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
+            LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
+            onPress={handleRowPress}
+            offlineWithFeedback={{errors, pendingAction, onClose: onDismissError, shouldHideOnDelete: false}}
         >
-            <Table.Row
-                interactive
-                rowIndex={rowIndex}
-                isLoading={isDeleting}
-                disabled={isCardDeleted}
-                skeletonReasonAttributes={reasonAttributes}
-                sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
-                LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
-                onPress={handleRowPress}
-            >
-                {({hovered}) => (
-                    <>
-                        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
-                            {isAssigned ? (
-                                <ReportActionAvatars
-                                    noRightMarginOnSubscriptContainer
-                                    size={avatarSize}
-                                    accountIDs={cardholder?.accountID ? [cardholder.accountID] : []}
-                                    subscriptCardFeed={assignedCard?.bank as CompanyCardFeed}
-                                    subscriptCardFeedIconSize={subscriptCardFeedIconSize}
-                                    subscriptAvatarBorderColor={hovered ? theme.hoverComponentBG : theme.highlightBG}
-                                />
-                            ) : (
-                                CardFeedIcon
-                            )}
+            {({hovered}) => (
+                <>
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
+                        {isAssigned ? (
+                            <ReportActionAvatars
+                                noRightMarginOnSubscriptContainer
+                                size={avatarSize}
+                                accountIDs={cardholder?.accountID ? [cardholder.accountID] : []}
+                                subscriptCardFeed={assignedCard?.bank as CompanyCardFeed}
+                                subscriptCardFeedIconSize={subscriptCardFeedIconSize}
+                                subscriptAvatarBorderColor={hovered ? theme.hoverComponentBG : theme.highlightBG}
+                            />
+                        ) : (
+                            CardFeedIcon
+                        )}
 
-                            <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, shouldUseNarrowTableLayout && styles.gap1]}>
+                        <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, shouldUseNarrowTableLayout && styles.gap1]}>
+                            <TextWithTooltip
+                                text={memberColumnTitle}
+                                style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter]}
+                            />
+                            {!!memberCardSubtitle && (
                                 <TextWithTooltip
-                                    text={memberColumnTitle}
-                                    style={[styles.optionDisplayName, styles.pre, styles.justifyContentCenter]}
+                                    text={memberCardSubtitle}
+                                    style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
                                 />
-                                {!!memberCardSubtitle && (
-                                    <TextWithTooltip
-                                        text={memberCardSubtitle}
-                                        style={[styles.textLabelSupporting, styles.lh16, styles.pre, styles.mr3]}
-                                    />
-                                )}
-                            </View>
+                            )}
                         </View>
-
-                        {!shouldUseNarrowTableLayout && (
-                            <View style={[styles.flex1]}>
-                                <Text
-                                    numberOfLines={1}
-                                    style={[styles.lh16, styles.optionDisplayName, styles.pre]}
-                                >
-                                    {formattedCardDetails}
-                                </Text>
-                            </View>
-                        )}
-
-                        {!shouldUseNarrowTableLayout && (
-                            <View style={[styles.flex1]}>
-                                <Text
-                                    numberOfLines={1}
-                                    style={[styles.lh16, styles.optionDisplayName, styles.pre]}
-                                >
-                                    {customCardName}
-                                </Text>
-                            </View>
+                    </View>
+
+                    {!shouldUseNarrowTableLayout && (
+                        <View style={[styles.flex1]}>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.lh16, styles.optionDisplayName, styles.pre]}
+                            >
+                                {formattedCardDetails}
+                            </Text>
+                        </View>
+                    )}
+
+                    {!shouldUseNarrowTableLayout && (
+                        <View style={[styles.flex1]}>
+                            <Text
+                                numberOfLines={1}
+                                style={[styles.lh16, styles.optionDisplayName, styles.pre]}
+                            >
+                                {customCardName}
+                            </Text>
+                        </View>
+                    )}
+
+                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap3]}>
+                        {!isAssigned && (
+                            <Button
+                                small
+                                success
+                                text={translate('workspace.companyCards.assign')}
+                                onPress={handleRowPress}
+                                isDisabled={isAssigningCardDisabled}
+                            />
                         )}
 
-                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentEnd, styles.gap3]}>
-                            {!isAssigned && (
-                                <Button
-                                    small
-                                    success
-                                    text={translate('workspace.companyCards.assign')}
-                                    onPress={handleRowPress}
-                                    isDisabled={isAssigningCardDisabled}
-                                />
-                            )}
-
-                            <Icon
-                                src={Expensicons.ArrowRight}
-                                fill={theme.icon}
-                                additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
-                                width={variables.iconSizeNormal}
-                                height={variables.iconSizeNormal}
-                            />
-                        </View>
-                    </>
-                )}
-            </Table.Row>
-        </OfflineWithFeedback>
+                        <Icon
+                            src={Expensicons.ArrowRight}
+                            fill={theme.icon}
+                            additionalStyles={[styles.alignSelfCenter, !hovered && styles.opacitySemiTransparent]}
+                            width={variables.iconSizeNormal}
+                            height={variables.iconSizeNormal}
+                        />
+                    </View>
+                </>
+            )}
+        </Table.Row>
     );
 }
 
diff --git a/tests/ui/TableTest.tsx b/tests/ui/TableTest.tsx
index 9459ac436a5d..f0aa8d9de771 100644
--- a/tests/ui/TableTest.tsx
+++ b/tests/ui/TableTest.tsx
@@ -52,7 +52,7 @@ jest.mock('@hooks/useThemeStyles', () =>
         textNormal: {},
         colorMuted: {},
         getSelectionListPopoverHeight: jest.fn(() => ({})),
-        ml3: {marginLeft: 0},
+        ml3: {marginLeft: 12},
     })),
 );
 

From 5fe3b80613a7c716575cba71b35b23f83b18e6d8 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 12 May 2026 09:30:28 -0400
Subject: [PATCH 37/43] update padding to 8

---
 src/components/Table/TableRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index a7de29692f6a..7f840eda9952 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -70,7 +70,7 @@ export default function TableRow({
         isInteractive && styles.userSelectNone,
         shouldUseNarrowTableLayout ? styles.ph4 : styles.ph3,
         shouldUseNarrowTableLayout && !isLoading && styles.pv4,
-        !shouldUseNarrowTableLayout && !isLoading && styles.pv3,
+        !shouldUseNarrowTableLayout && !isLoading && styles.pv2,
         isLastRow ? styles.tableBottomRadius : styles.borderBottom,
         shouldUseNarrowTableLayout ? styles.tableRowHeightCompact : styles.tableRowHeight,
     ];

From 2297f11ce29f2eb03d77c1ec175e874b9ec7bb9c Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 12 May 2026 11:06:31 -0400
Subject: [PATCH 38/43] fix loading states

---
 src/components/Table/TableRow.tsx                | 16 +++++++++-------
 .../WorkspaceCompanyCardsTableRow.tsx            |  4 ++--
 .../WorkspaceCompanyCardsTableSkeleton.tsx       |  6 +++---
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 7f840eda9952..9a0f9611ad7d 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -114,13 +114,15 @@ export default function TableRow({
             >
                 {(state) =>
                     !!isLoading && LoadingComponent ? (
-                        <SkeletonViewContentLoader
-                            backgroundColor={theme.skeletonLHNIn}
-                            foregroundColor={theme.skeletonLHNOut}
-                            height={shouldUseNarrowTableLayout ? variables.tableRowHeightCompact : variables.tableRowHeight}
-                        >
-                            <LoadingComponent />
-                        </SkeletonViewContentLoader>
+                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                            <SkeletonViewContentLoader
+                                height={32}
+                                backgroundColor={theme.skeletonLHNIn}
+                                foregroundColor={theme.skeletonLHNOut}
+                            >
+                                <LoadingComponent />
+                            </SkeletonViewContentLoader>
+                        </View>
                     ) : (
                         <View style={tableRowContentStyles}>{renderChildren(state)}</View>
                     )
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
index e21a3f00e804..bdc2ac9a40e1 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx
@@ -115,12 +115,12 @@ function WorkspaceCompanyCardTableRow({item, policyID, CardFeedIcon, shouldUseNa
             interactive
             rowIndex={rowIndex}
             isLoading={isDeleting}
-            disabled={isCardDeleted}
+            disabled={isCardDeleted || isAssigningCardDisabled}
             skeletonReasonAttributes={reasonAttributes}
             sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
             LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
-            onPress={handleRowPress}
             offlineWithFeedback={{errors, pendingAction, onClose: onDismissError, shouldHideOnDelete: false}}
+            onPress={handleRowPress}
         >
             {({hovered}) => (
                 <>
diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
index 0bb9ea2918a2..16807cbcde39 100644
--- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
+++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx
@@ -7,16 +7,16 @@ export default function WorkspaceCompanyCardsTableSkeleton() {
         <>
             <Circle
                 cx={20}
-                cy={28}
+                cy={14}
                 r="14"
             />
             <SkeletonRect
-                transform={[{translateX: 50}, {translateY: 16}]}
+                transform={[{translateX: 50}, {translateY: 4}]}
                 width={124}
                 height={8}
             />
             <SkeletonRect
-                transform={[{translateX: 50}, {translateY: 32}]}
+                transform={[{translateX: 50}, {translateY: 20}]}
                 width={60}
                 height={8}
             />

From 1d14a3f85e48b0bcb6b8de17c5a229598bfed861 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 12 May 2026 11:19:55 -0400
Subject: [PATCH 39/43] fix main table skseleton

---
 src/components/Table/TableSkeleton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 90e2d9eac19a..5678e34ace50 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -44,9 +44,9 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
             style={[tableSkeletonRowStyles, index !== rowCount - 1 && styles.borderBottom]}
         >
             <SkeletonViewContentLoader
+                height={32}
                 backgroundColor={theme.skeletonLHNIn}
                 foregroundColor={theme.skeletonLHNOut}
-                height={isSmallView ? variables.tableRowHeightCompact : variables.tableRowHeight}
             >
                 {renderSkeletonItem()}
             </SkeletonViewContentLoader>

From 238c36dc266e2e47ad2183c22dac3cafaf3f1d73 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Tue, 12 May 2026 14:40:24 -0400
Subject: [PATCH 40/43] fix lint

---
 src/components/Table/TableRow.tsx      | 1 -
 src/components/Table/TableSkeleton.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 9a0f9611ad7d..77c3c9689a05 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -10,7 +10,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
 
diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 5678e34ace50..797a9e42e62b 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -6,7 +6,6 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
-import variables from '@styles/variables';
 
 type TableSkeletonProps = {
     /** The number of skeleton rows to render */

From 381a10dc6a66afe78e8ddb85d9933038fee02165 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Wed, 13 May 2026 08:11:16 -0400
Subject: [PATCH 41/43] fix types

---
 .../TransactionListItem/TransactionListItemNarrow.tsx       | 6 +++---
 .../TransactionListItem/TransactionListItemWide.tsx         | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx
index 79d6a09a3e12..466361521f6f 100644
--- a/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemNarrow.tsx
@@ -87,8 +87,8 @@ function TransactionListItemNarrow<TItem extends ListItem>({
                     styles.flex1,
                     animatedHighlightStyle,
                     styles.userSelectNone,
-                    isFirstItem && [styles.searchTableTopRadius, styles.overflowHidden],
-                    isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden],
+                    isFirstItem && [styles.tableTopRadius, styles.overflowHidden],
+                    isLastItem && [styles.tableBottomRadius, styles.overflowHidden],
                     !isLastItem && StyleUtils.getSelectedBorderBottomStyle(item.isSelected),
                 ]}
             >
@@ -119,7 +119,7 @@ function TransactionListItemNarrow<TItem extends ListItem>({
                             taxAmountColumnSize={CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL}
                             shouldShowCheckbox={!!canSelectMultiple}
                             checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
-                            style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
+                            style={[styles.p3, styles.pv2, styles.p0, styles.pt3, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
                             violations={transactionViolations}
                             onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
                             isHover={false}
diff --git a/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx b/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx
index 2549d191ac25..cd1c551a0c6f 100644
--- a/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx
+++ b/src/components/Search/SearchList/ListItem/TransactionListItem/TransactionListItemWide.tsx
@@ -91,7 +91,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                     isDeletedTransaction && styles.cursorDefault,
                 ]}
                 onFocus={onFocus}
-                wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.searchTableBottomRadius, styles.overflowHidden]]}
+                wrapperStyle={[styles.mh5, styles.flex1, animatedHighlightStyle, styles.userSelectNone, isLastItem && [styles.tableBottomRadius, styles.overflowHidden]]}
             >
                 {({hovered}) => (
                     <TransactionItemRow
@@ -117,7 +117,7 @@ function TransactionListItemWide<TItem extends ListItem>({
                         isActionColumnWide={transactionItem.isActionColumnWide}
                         shouldShowCheckbox={!!canSelectMultiple}
                         checkboxSentryLabel={CONST.SENTRY_LABEL.SEARCH.TRANSACTION_LIST_ITEM_CHECKBOX}
-                        style={[styles.p3, styles.pv2, isLastItem ? styles.searchTableBottomRadius : styles.noBorderRadius]}
+                        style={[styles.p3, styles.pv2, isLastItem ? styles.tableBottomRadius : styles.noBorderRadius]}
                         violations={transactionViolations}
                         onArrowRightPress={isDeletedTransaction ? undefined : () => onSelectRow(item, transactionPreviewData)}
                         isHover={hovered}

From f05078f17710d5cc5459e83a1054ecfe485f3c23 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Wed, 13 May 2026 10:52:10 -0400
Subject: [PATCH 42/43] fix native skeleton issues

---
 src/components/Table/TableRow.tsx      | 3 ++-
 src/components/Table/TableSkeleton.tsx | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 77c3c9689a05..1d0c8fae9cec 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -113,9 +113,10 @@ export default function TableRow({
             >
                 {(state) =>
                     !!isLoading && LoadingComponent ? (
-                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                        <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                             <SkeletonViewContentLoader
                                 height={32}
+                                width="100%"
                                 backgroundColor={theme.skeletonLHNIn}
                                 foregroundColor={theme.skeletonLHNOut}
                             >
diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 797a9e42e62b..3b95327b4b83 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -28,6 +28,7 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
     const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout;
 
     const tableSkeletonRowStyles = [
+        styles.flex1,
         styles.flexRow,
         styles.overflowHidden,
         styles.alignItemsCenter,
@@ -44,6 +45,7 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
         >
             <SkeletonViewContentLoader
                 height={32}
+                width="100%"
                 backgroundColor={theme.skeletonLHNIn}
                 foregroundColor={theme.skeletonLHNOut}
             >

From 0838b7976db78633d17f721a26ba7dcff7c77e97 Mon Sep 17 00:00:00 2001
From: Jack Senyitko <jsenyitko@expensify.com>
Date: Wed, 13 May 2026 13:40:27 -0400
Subject: [PATCH 43/43] remove magic numbers

---
 src/components/Table/TableRow.tsx      | 3 ++-
 src/components/Table/TableSkeleton.tsx | 3 ++-
 src/styles/variables.ts                | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx
index 1d0c8fae9cec..55196c58e901 100644
--- a/src/components/Table/TableRow.tsx
+++ b/src/components/Table/TableRow.tsx
@@ -10,6 +10,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import {useTableContext} from './TableContext';
 
@@ -115,10 +116,10 @@ export default function TableRow({
                     !!isLoading && LoadingComponent ? (
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                             <SkeletonViewContentLoader
-                                height={32}
                                 width="100%"
                                 backgroundColor={theme.skeletonLHNIn}
                                 foregroundColor={theme.skeletonLHNOut}
+                                height={variables.tableSkeletonHeight}
                             >
                                 <LoadingComponent />
                             </SkeletonViewContentLoader>
diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx
index 3b95327b4b83..71763b16a821 100644
--- a/src/components/Table/TableSkeleton.tsx
+++ b/src/components/Table/TableSkeleton.tsx
@@ -6,6 +6,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
+import variables from '@styles/variables';
 
 type TableSkeletonProps = {
     /** The number of skeleton rows to render */
@@ -44,10 +45,10 @@ export default function TableSkeleton({renderSkeletonItem, reasonAttributes, row
             style={[tableSkeletonRowStyles, index !== rowCount - 1 && styles.borderBottom]}
         >
             <SkeletonViewContentLoader
-                height={32}
                 width="100%"
                 backgroundColor={theme.skeletonLHNIn}
                 foregroundColor={theme.skeletonLHNOut}
+                height={variables.tableSkeletonHeight}
             >
                 {renderSkeletonItem()}
             </SkeletonViewContentLoader>
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index f458dc2507bd..f1791dee9512 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -130,6 +130,7 @@ export default {
     tableRowPaddingHorizontal: 12,
     tableGroupRowPaddingVertical: 4,
     tableGroupRowHeight: 36,
+    tableSkeletonHeight: 32,
     sectionMenuItemHeight: 52,
     sectionMenuItemHeightCompact: 44,
     optionsListSectionHeaderHeight: getValueUsingPixelRatio(32, 38),