Merge pull request #42032 from Krishna2323/krishna2323/issue/35389

fix: Status - Emoji in custom status holder is not centered.
Expensify · Jun 10, 2024 · bb10b8b · bb10b8b
2 parents 3a7cfe6 + 6454fe2
commit bb10b8b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/src/pages/home/sidebar/AvatarWithOptionalStatus.tsx b/src/pages/home/sidebar/AvatarWithOptionalStatus.tsx
@@ -19,12 +19,14 @@ function AvatarWithOptionalStatus({emojiStatus = '', isSelected = false}: Avatar
         <View style={styles.sidebarStatusAvatarContainer}>
             <ProfileAvatarWithIndicator isSelected={isSelected} />
             <View style={[styles.sidebarStatusAvatar]}>
-                <Text
-                    style={styles.emojiStatusLHN}
-                    numberOfLines={1}
-                >
-                    {emojiStatus}
-                </Text>
+                <View>
+                    <Text
+                        style={styles.emojiStatusLHN}
+                        numberOfLines={1}
+                    >
+                        {emojiStatus}
+                    </Text>
+                </View>
             </View>
         </View>
     );

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -4396,6 +4396,15 @@ const styles = (theme: ThemeColors) =>
 
         emojiStatusLHN: {
             fontSize: 9,
+            ...(Browser.getBrowser() && !Browser.isMobile() && {transform: 'scale(.5)', fontSize: 22, overflow: 'visible'}),
+            ...(Browser.getBrowser() &&
+                Browser.isSafari() &&
+                !Browser.isMobile() && {
+                    transform: 'scale(0.7)',
+                    fontSize: 13,
+                    lineHeight: 15,
+                    overflow: 'visible',
+                }),
         },
 
         onboardingVideoPlayer: {
@@ -4423,6 +4432,7 @@ const styles = (theme: ThemeColors) =>
             bottom: -4,
             borderColor: theme.highlightBG,
             borderWidth: 2,
+            overflow: 'hidden',
         },
         moneyRequestViewImage: {
             ...spacing.mh5,