Fix long username cutoff not showing ellipses

CHANGELOG.md

@@ -30,6 +30,7 @@
 - changed: Display Asset Status cards in the same style as Promo Cards
 - changed: Updated ACH supported US states
 - changed: Use new platform-specific `assetStatsCards2` info server data
+- fixed: Missing ellipses for long usernames displayed in the `SideMenu`
 - fixed: Inconsistent content of address hint dropdown between iOS and Android in `AddressFormScene`
 - fixed: Allow `InfoCardCarousel` to receive undefined `countryCodes`
 - fixed: Crash on HomeScene when logging while in airplane mode

src/components/themed/SideMenu.tsx

@@ -39,6 +39,7 @@ import { Services } from '../services/Services'
 import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
 import { TitleText } from '../text/TitleText'
 import { DividerLine } from './DividerLine'
+import { EdgeText } from './EdgeText'
 
 const footerGradientStart = { x: 0, y: 0 }
 const footerGradientEnd = { x: 0, y: 0.75 }
@@ -296,7 +297,9 @@ export function SideMenu(props: DrawerContentComponentProps) {
               <Fontello name="control-panel-account" style={styles.icon} size={theme.rem(1.5)} color={theme.iconTappable} />
             </View>
             <View style={styles.rowBodyContainer}>
-              <TitleText style={styles.text}>{displayUsername}</TitleText>
+              <EdgeText style={styles.text} disableFontScaling={Platform.OS === 'android'} ellipsizeMode="tail">
+                {displayUsername}
+              </EdgeText>
             </View>
             {isMultiUsers ? (
               <View style={styles.rightIconContainer}>
@@ -321,9 +324,9 @@ export function SideMenu(props: DrawerContentComponentProps) {
               {/* This empty container is required to align the row contents properly */}
               <View style={styles.leftIconContainer} />
               <EdgeTouchableOpacity style={styles.rowBodyContainer} onPress={handleSwitchAccount(userInfo)}>
-                <TitleText style={styles.text}>
+                <EdgeText style={styles.text} disableFontScaling={Platform.OS === 'android'} ellipsizeMode="tail">
                   {userInfo.username == null ? sprintf(lstrings.guest_account_id_1s, userInfo.loginId.slice(userInfo.loginId.length - 3)) : userInfo.username}
-                </TitleText>
+                </EdgeText>
               </EdgeTouchableOpacity>
               <EdgeTouchableOpacity style={styles.rightIconContainer} onPress={handleDeleteAccount(userInfo)}>
                 <MaterialIcon accessibilityHint={lstrings.close_control_panel_hint} color={theme.iconTappable} name="close" size={theme.rem(1.5)} />