Align avatar gaps and balance column widths

Author: sumo-slonik

src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx

@@ -70,6 +70,7 @@ function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo
                         <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                             <ReportActionAvatars
                                 noRightMarginOnSubscriptContainer
+                                singleAvatarContainerStyle={[styles.mr0]}
                                 reportID={item.reportID}
                                 size={CONST.AVATAR_SIZE.DEFAULT}
                             />
@@ -101,6 +102,7 @@ function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo
                             <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                                 <ReportActionAvatars
                                     noRightMarginOnSubscriptContainer
+                                    singleAvatarContainerStyle={[styles.mr0]}
                                     reportID={item.reportID}
                                     size={CONST.AVATAR_SIZE.SMALL}
                                 />
@@ -111,7 +113,7 @@ function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo
                                 />
                             </View>
 
-                            <View style={[styles.flex1, styles.flexRow, styles.gap2, styles.alignItemsCenter]}>
+                            <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.alignItemsCenter]}>
                                 {!!item.ownerDisplayName && (
                                     <>
                                         {!!item.ownerAccountID && (

src/components/Tables/WorkspaceRoomsTable/index.tsx

@@ -27,7 +27,7 @@ function WorkspaceRoomsTable({rooms}: WorkspaceRoomsTableProps) {
         {key: 'name', label: translate('common.name')},
         {key: 'createdBy', label: translate('common.createdBy')},
         {key: 'members', label: translate('common.members'), width: variables.workspaceRoomsMembersColumnWidth},
-        {key: 'actions', label: '', styling: {containerStyles: [styles.justifyContentEnd, styles.pr3]}},
+        {key: 'actions', label: '', width: variables.workspaceRoomsActionsColumnWidth, styling: {containerStyles: [styles.justifyContentEnd, styles.pr3]}},
     ];
 
     const compareItems: CompareItemsCallback<WorkspaceRoomRowData, WorkspaceRoomsTableColumnKey> = (a, b, activeSorting) => {

src/styles/variables.ts

@@ -331,6 +331,7 @@ export default {
 
     searchTypeColumnWidth: 52,
     workspaceRoomsMembersColumnWidth: 80,
+    workspaceRoomsActionsColumnWidth: 40,
 
     gbrTooltipShiftHorizontal: -14,
     gbrTooltipShiftVertical: -16,