Merge pull request #40599 from dragnoir/40524-fix

[CP Staging] Fix: align badge in workspace list (cherry picked from commit 0f30b3d)
Expensify · Apr 22, 2024 · b3a2817 · b3a2817
1 parent afbacfd
commit b3a2817
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx
@@ -260,7 +260,7 @@ function WorkspacesListPage({policies, reimbursementAccount, reports, session}:
                         {translate('workspace.common.workspaceType')}
                     </Text>
                 </View>
-                <View style={[styles.ml10, styles.mr2]} />
+                <View style={[styles.workspaceRightColumn, styles.mr2]} />
             </View>
         );
     }, [isLessThanMediumScreen, styles, translate]);

diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
@@ -181,7 +181,7 @@ function WorkspacesListRow({
                         </>
                     )}
                 </View>
-                <View style={[styles.flexRow, isWide && !isJoinRequestPending && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                     <Icon
                         src={workspaceTypeIcon(workspaceType)}
                         width={variables.workspaceTypeIconWidth}
@@ -206,7 +206,9 @@ function WorkspacesListRow({
             </View>
             <View style={[isNarrow && styles.mr5]}>
                 {isJoinRequestPending && (
-                    <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, styles.mln6, styles.pr4]}>
+                    <View
+                        style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, !isNarrow && styles.pr4, isNarrow && styles.workspaceListBadge]}
+                    >
                         <Badge
                             text={translate('workspace.common.requested')}
                             textStyles={styles.textStrong}
@@ -220,7 +222,10 @@ function WorkspacesListRow({
                         <View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                             <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
                         </View>
-                        <View ref={threeDotsMenuContainerRef}>
+                        <View
+                            ref={threeDotsMenuContainerRef}
+                            style={[styles.workspaceThreeDotMenu]}
+                        >
                             <ThreeDotsMenu
                                 onIconPress={() => {
                                     if (isSmallScreenWidth) {

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -3207,6 +3207,20 @@ const styles = (theme: ThemeColors) =>
             marginLeft: 3,
         },
 
+        workspaceRightColumn: {
+            marginLeft: 124,
+        },
+
+        workspaceThreeDotMenu: {
+            marginLeft: 84,
+        },
+
+        workspaceListBadge: {
+            flexDirection: 'column',
+            justifyContent: 'flex-start',
+            marginTop: 6,
+        },
+
         autoGrowHeightMultilineInput: {
             maxHeight: 115,
         },