Merge pull request #29894 from abzokhattab/fix-long-workspace-names-t…

…ooltip-in-chat-settings Add tooltip for long names in the settings page of workspace chat
Expensify · Oct 19, 2023 · 3b3d3d1 · 3b3d3d1
2 parents 2f06347 + 4c98bc6
commit 3b3d3d1
Showing 1 changed file with 13 additions and 10 deletions.
diff --git a/src/pages/settings/Report/ReportSettingsPage.js b/src/pages/settings/Report/ReportSettingsPage.js
@@ -23,6 +23,7 @@ import MenuItemWithTopDescription from '../../../components/MenuItemWithTopDescr
 import ROUTES from '../../../ROUTES';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import MenuItem from '../../../components/MenuItem';
+import DisplayNames from '../../../components/DisplayNames';
 
 const propTypes = {
     /** Route params */
@@ -112,12 +113,13 @@ function ReportSettingsPage(props) {
                                     >
                                         {roomNameLabel}
                                     </Text>
-                                    <Text
+                                    <DisplayNames
+                                        fullTitle={reportName}
+                                        tooltipEnabled
                                         numberOfLines={1}
-                                        style={[styles.optionAlternateText, styles.pre]}
-                                    >
-                                        {reportName}
-                                    </Text>
+                                        textStyles={[styles.optionAlternateText, styles.pre]}
+                                        shouldUseFullTitle
+                                    />
                                 </View>
                             ) : (
                                 <MenuItemWithTopDescription
@@ -162,12 +164,13 @@ function ReportSettingsPage(props) {
                                 >
                                     {translate('workspace.common.workspace')}
                                 </Text>
-                                <Text
+                                <DisplayNames
+                                    fullTitle={linkedWorkspace.name}
+                                    tooltipEnabled
                                     numberOfLines={1}
-                                    style={[styles.optionAlternateText, styles.pre]}
-                                >
-                                    {linkedWorkspace.name}
-                                </Text>
+                                    textStyles={[styles.optionAlternateText, styles.pre]}
+                                    shouldUseFullTitle
+                                />
                             </View>
                         )}
                         {Boolean(report.visibility) && (