Make title overflow wrap instead of truncation (#3967)

Co-authored-by: Andrey Myssak <[email protected]> Signed-off-by: Sergey Myssak <[email protected]>
opensearch-project · Jun 5, 2023 · e2283bd · e2283bd
1 parent aa886ac
commit e2283bd
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 54 deletions.
diff --git a/...lic/management_section/objects_table/components/__snapshots__/relationships.test.tsx.snap b/...lic/management_section/objects_table/components/__snapshots__/relationships.test.tsx.snap
diff --git a/..._objects_management/public/management_section/objects_table/components/relationships.scss b/..._objects_management/public/management_section/objects_table/components/relationships.scss
@@ -0,0 +1,8 @@
+.savedObjectsManagementRelationships__tooltipAnchor {
+  position: absolute;
+}
+
+.savedObjectsManagementRelationships__title {
+  text-indent: 16px;
+  overflow-wrap: break-word;
+}
diff --git a/...d_objects_management/public/management_section/objects_table/components/relationships.tsx b/...d_objects_management/public/management_section/objects_table/components/relationships.tsx
@@ -28,6 +28,7 @@
  * under the License.
  */
 
+import './relationships.scss';
 import React, { Component } from 'react';
 import {
   EuiTitle,
@@ -337,16 +338,21 @@ export class Relationships extends Component<RelationshipsProps, RelationshipsSt
       <EuiFlyout onClose={close}>
         <EuiFlyoutHeader hasBorder>
           <EuiTitle size="m">
-            <h2 className="eui-textTruncate">
-              <EuiToolTip position="top" content={getSavedObjectLabel(savedObject.type)}>
+            <h2>
+              <EuiToolTip
+                position="top"
+                content={getSavedObjectLabel(savedObject.type)}
+                anchorClassName="savedObjectsManagementRelationships__tooltipAnchor"
+              >
                 <EuiIcon
                   aria-label={getSavedObjectLabel(savedObject.type)}
                   size="m"
                   type={savedObject.meta.icon || 'apps'}
                 />
               </EuiToolTip>
-              &nbsp;&nbsp;
-              {savedObject.meta.title || getDefaultTitle(savedObject)}
+              <p className="savedObjectsManagementRelationships__title">
+                &nbsp;&nbsp;{savedObject.meta.title || getDefaultTitle(savedObject)}
+              </p>
             </h2>
           </EuiTitle>
         </EuiFlyoutHeader>