diff --git a/src/pages/workspace/WorkspacesListRow.tsx b/src/pages/workspace/WorkspacesListRow.tsx index 54717b032ebe..e9963e5469c2 100644 --- a/src/pages/workspace/WorkspacesListRow.tsx +++ b/src/pages/workspace/WorkspacesListRow.tsx @@ -15,6 +15,7 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils'; import type {AvatarSource} from '@libs/UserUtils'; import type {AnchorPosition} from '@styles/index'; @@ -108,6 +109,7 @@ function WorkspacesListRow({ const {translate} = useLocalize(); const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState({horizontal: 0, vertical: 0}); const threeDotsMenuContainerRef = useRef(null); + const {isSmallScreenWidth} = useWindowDimensions(); const ownerDetails = ownerAccountID && PersonalDetailsUtils.getPersonalDetailsByIDs([ownerAccountID], currentUserPersonalDetails.accountID)[0]; @@ -136,124 +138,111 @@ function WorkspacesListRow({ const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false; return ( - - - - - {title} - - {isNarrow && - (!isJoinRequestPending ? ( + + + + + + {title} + + + + {!!ownerDetails && ( <> - - + + + {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)} + + + {ownerDetails.login} + + - ) : ( + )} + + + + + + {userFriendlyWorkspaceType} + + + {translate('workspace.common.plan')} + + + + + + {isJoinRequestPending && ( + - ))} - - - {!!ownerDetails && ( + + )} + {!isJoinRequestPending && ( <> - - - - {PersonalDetailsUtils.getDisplayNameOrDefault(ownerDetails)} - - - {ownerDetails.login} - + + + + + { + 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} + /> )} - - - - - {userFriendlyWorkspaceType} - - - {translate('workspace.common.plan')} - - - - {isJoinRequestPending && !isNarrow && ( - - - - )} - - {isWide && !isJoinRequestPending && ( - <> - - - - - { - 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}} - iconStyles={[styles.mr2]} - shouldOverlay - disabled={shouldDisableThreeDotsMenu} - /> - - - )} ); }