Merge pull request #40824 from getusha/fix-wt

[CP Staging] Fix: Android - Workspace list - Workspace name and email address are truncated
Expensify · Apr 23, 2024 · 109d0f0 · 109d0f0
2 parents c90b46e + 24c36b1
commit 109d0f0
Showing 1 changed file with 65 additions and 57 deletions.
diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx
@@ -137,24 +137,72 @@ function WorkspacesListRow({
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
 
+    const ThreeDotMenuOrPendingIcon = (
+        <View style={[isNarrow && styles.mr5]}>
+            {isJoinRequestPending && (
+                <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}
+                        badgeStyles={[styles.alignSelfCenter, styles.badgeBordered]}
+                        icon={Expensicons.Hourglass}
+                    />
+                </View>
+            )}
+            {!isJoinRequestPending && (
+                <>
+                    <View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
+                        <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
+                    </View>
+                    <View
+                        ref={threeDotsMenuContainerRef}
+                        style={[!isSmallScreenWidth && styles.workspaceThreeDotMenu]}
+                    >
+                        <ThreeDotsMenu
+                            onIconPress={() => {
+                                if (isSmallScreenWidth) {
+                                    return;
+                                }
+                                threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
+                                    setThreeDotsMenuPosition({
+                                        horizontal: x + width,
+                                        vertical: y + height,
+                                    });
+                                });
+                            }}
+                            menuItems={menuItems}
+                            anchorPosition={threeDotsMenuPosition}
+                            anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                            shouldOverlay
+                            disabled={shouldDisableThreeDotsMenu}
+                        />
+                    </View>
+                </>
+            )}
+        </View>
+    );
+
     return (
         <View style={[styles.flexRow, styles.highlightBG, rowStyles, style, isWide && styles.gap5, styles.br3, styles.pv5, styles.pl5]}>
             <View style={[isWide ? styles.flexRow : styles.flexColumn, styles.flex1, isWide && styles.gap5]}>
-                <View style={[styles.flexRow, isWide && styles.flex1, styles.gap3, isNarrow && styles.mb3, styles.alignItemsCenter]}>
-                    <Avatar
-                        imageStyles={[styles.alignSelfCenter]}
-                        size={CONST.AVATAR_SIZE.DEFAULT}
-                        source={workspaceIcon}
-                        fallbackIcon={fallbackWorkspaceIcon}
-                        name={title}
-                        type={CONST.ICON_TYPE_WORKSPACE}
-                    />
-                    <Text
-                        numberOfLines={1}
-                        style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
-                    >
-                        {title}
-                    </Text>
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.flex1, isNarrow && styles.mb3, styles.alignItemsCenter]}>
+                    <View style={[styles.flexRow, styles.gap3, styles.flex1, styles.alignItemsCenter]}>
+                        <Avatar
+                            imageStyles={[styles.alignSelfCenter]}
+                            size={CONST.AVATAR_SIZE.DEFAULT}
+                            source={workspaceIcon}
+                            fallbackIcon={fallbackWorkspaceIcon}
+                            name={title}
+                            type={CONST.ICON_TYPE_WORKSPACE}
+                        />
+                        <Text
+                            numberOfLines={1}
+                            style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
+                        >
+                            {title}
+                        </Text>
+                    </View>
+                    {isSmallScreenWidth && ThreeDotMenuOrPendingIcon}
                 </View>
                 <View style={[styles.flexRow, isWide && styles.flex1, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
                     {!!ownerDetails && (
@@ -204,48 +252,8 @@ function WorkspacesListRow({
                     </View>
                 </View>
             </View>
-            <View style={[isNarrow && styles.mr5]}>
-                {isJoinRequestPending && (
-                    <View
-                        style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.flex1, styles.justifyContentEnd, !isNarrow && styles.pr4, isNarrow && styles.workspaceListBadge]}
-                    >
-                        <Badge
-                            text={translate('workspace.common.requested')}
-                            icon={Expensicons.Hourglass}
-                        />
-                    </View>
-                )}
-                {!isJoinRequestPending && (
-                    <>
-                        <View style={[styles.flexRow, styles.flex0, styles.gap2, isNarrow && styles.mr5, styles.alignItemsCenter]}>
-                            <BrickRoadIndicatorIcon brickRoadIndicator={brickRoadIndicator} />
-                        </View>
-                        <View
-                            ref={threeDotsMenuContainerRef}
-                            style={[styles.workspaceThreeDotMenu]}
-                        >
-                            <ThreeDotsMenu
-                                onIconPress={() => {
-                                    if (isSmallScreenWidth) {
-                                        return;
-                                    }
-                                    threeDotsMenuContainerRef.current?.measureInWindow((x, y, width, height) => {
-                                        setThreeDotsMenuPosition({
-                                            horizontal: x + width,
-                                            vertical: y + height,
-                                        });
-                                    });
-                                }}
-                                menuItems={menuItems}
-                                anchorPosition={threeDotsMenuPosition}
-                                anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
-                                shouldOverlay
-                                disabled={shouldDisableThreeDotsMenu}
-                            />
-                        </View>
-                    </>
-                )}
-            </View>
+
+            {!isSmallScreenWidth && ThreeDotMenuOrPendingIcon}
         </View>
     );
 }