Merge pull request #4835 from akshayasalvi/trim-long-workspace-name

Trim long workspace name
Expensify · Aug 25, 2021 · 2efff1b · 2efff1b
2 parents 835cfde + 7117ce8
commit 2efff1b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -151,11 +151,13 @@ const MenuItem = ({
                         </View>
                     )}
                     <View style={[styles.justifyContentCenter, styles.menuItemTextContainer]}>
-                        <Text style={[
-                            styles.popoverMenuText,
-                            styles.ml3,
-                            (disabled ? styles.disabledText : undefined),
-                        ]}
+                        <Text
+                            style={[
+                                styles.popoverMenuText,
+                                styles.ml3,
+                                (disabled ? styles.disabledText : undefined),
+                            ]}
+                            numberOfLines={1}
                         >
                             {title}
                         </Text>

diff --git a/src/pages/workspace/WorkspaceSidebar.js b/src/pages/workspace/WorkspaceSidebar.js
@@ -26,6 +26,7 @@ import ONYXKEYS from '../../ONYXKEYS';
 import Avatar from '../../components/Avatar';
 import CONST from '../../CONST';
 import {create} from '../../libs/actions/Policy';
+import Tooltip from '../../components/Tooltip';
 
 const propTypes = {
     /** Policy for the current route */
@@ -134,17 +135,20 @@ const WorkspaceSidebar = ({
                                     styles.alignSelfCenter,
                                     styles.mt4,
                                     styles.mb6,
+                                    styles.w100,
                                 ]}
                                 onPress={openEditor}
                             >
-                                <Text
-                                    numberOfLines={1}
-                                    style={[
-                                        styles.displayName,
-                                    ]}
-                                >
-                                    {policy.name}
-                                </Text>
+                                <Tooltip text={policy.name}>
+                                    <Text
+                                        numberOfLines={1}
+                                        style={[
+                                            styles.displayName,
+                                        ]}
+                                    >
+                                        {policy.name}
+                                    </Text>
+                                </Tooltip>
                             </Pressable>
                         </View>
                     </View>

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -895,6 +895,7 @@ const styles = {
         fontSize: variables.fontSizeNormal,
         fontWeight: fontWeightBold,
         color: themeColors.heading,
+        maxWidth: 240,
     },
 
     menuItemTextContainer: {