fix: default badge is misaligned on medium screens

Author: dominictb

src/pages/workspace/WorkspacesListRow.tsx

@@ -17,7 +17,6 @@ import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentU
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import WorkspacesListRowDisplayName from '@components/WorkspacesListRowDisplayName';
 import useLocalize from '@hooks/useLocalize';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getDisplayNameOrDefault, getPersonalDetailsByIDs} from '@libs/PersonalDetailsUtils';
@@ -127,7 +126,7 @@ function WorkspacesListRow({
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const threeDotsMenuContainerRef = useRef<View>(null);
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const isNarrow = layoutWidth === CONST.LAYOUT_WIDTH.NARROW;
 
     const ownerDetails = ownerAccountID && getPersonalDetailsByIDs({accountIDs: [ownerAccountID], currentUserAccountID: currentUserPersonalDetails.accountID}).at(0);
     const threeDotsMenuRef = useRef<{hidePopoverMenu: () => void; isPopupMenuVisible: boolean}>(null);
@@ -145,7 +144,7 @@ function WorkspacesListRow({
     }, [isLoadingBill, resetLoadingSpinnerIconIndex]);
 
     const calculateAndSetThreeDotsMenuPosition = useCallback(() => {
-        if (shouldUseNarrowLayout) {
+        if (isNarrow) {
             return Promise.resolve({horizontal: 0, vertical: 0});
         }
         return new Promise<AnchorPosition>((resolve) => {
@@ -156,7 +155,7 @@ function WorkspacesListRow({
                 });
             });
         });
-    }, [shouldUseNarrowLayout]);
+    }, [isNarrow]);
 
     if (layoutWidth === CONST.LAYOUT_WIDTH.NONE) {
         // To prevent layout from jumping or rendering for a split second, when
@@ -165,12 +164,11 @@ function WorkspacesListRow({
     }
 
     const isWide = layoutWidth === CONST.LAYOUT_WIDTH.WIDE;
-    const isNarrow = layoutWidth === CONST.LAYOUT_WIDTH.NARROW;
 
     const isDeleted = style && Array.isArray(style) ? style.includes(styles.offlineFeedback.deleted) : false;
 
     const ThreeDotMenuOrPendingIcon = (
-        <View style={[styles.flexRow, !shouldUseNarrowLayout && styles.workspaceThreeDotMenu]}>
+        <View style={[styles.flexRow, !isNarrow && styles.workspaceThreeDotMenu]}>
             {!!isJoinRequestPending && (
                 <View style={[styles.flexRow, styles.gap2, styles.alignItemsCenter, styles.justifyContentEnd]}>
                     <Badge
@@ -237,7 +235,7 @@ function WorkspacesListRow({
                             style={[styles.flex1, styles.flexGrow1, styles.textStrong, isDeleted ? styles.offlineFeedback.deleted : {}]}
                         />
                     </View>
-                    {shouldUseNarrowLayout && ThreeDotMenuOrPendingIcon}
+                    {isNarrow && ThreeDotMenuOrPendingIcon}
                 </View>
                 <View style={[styles.flexRow, isWide && styles.flex1, isWide && styles.workspaceOwnerSectionMinWidth, styles.gap2, styles.alignItemsCenter]}>
                     {!!ownerDetails && (
@@ -290,7 +288,7 @@ function WorkspacesListRow({
                 </View>
             </View>
 
-            {!shouldUseNarrowLayout && ThreeDotMenuOrPendingIcon}
+            {!isNarrow && ThreeDotMenuOrPendingIcon}
         </View>
     );
 }