feat(SFINT-4414): fix text ellipsis (#113)

* feat(SFINT-4414): Text ellipsis Fixed text ellipsis in the Activity Timeline Fixed text ellipsis in the query list
coveo · Feb 23, 2022 · e9975ae · e9975ae
1 parent 3a3e59c
commit e9975ae
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/src/components/UserActions/QueryList.ts b/src/components/UserActions/QueryList.ts
@@ -16,6 +16,7 @@ const DEFAULT_TRANSFORMATION = () => (query: string) => {
     const link = document.createElement('a');
     link.classList.add('coveo-link');
     link.innerText = query;
+    link.title = query;
 
     container.appendChild(icon);
     container.appendChild(link);

diff --git a/src/components/UserActions/UserActions.scss b/src/components/UserActions/UserActions.scss
@@ -124,6 +124,8 @@ $clickable-blue: #004990;
                 a {
                     width: calc(100% - #{$icon-container-size});
                     margin-bottom: 7px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .coveo-row-icon {
@@ -273,6 +275,8 @@ $clickable-blue: #004990;
                 vertical-align: top;
                 text-align: left;
                 display: table-cell;
+                overflow: hidden;
+                text-overflow: ellipsis;
             }
 
             .coveo-activity-timestamp {

diff --git a/src/components/UserActions/UserActivity.ts b/src/components/UserActions/UserActivity.ts
@@ -434,6 +434,7 @@ export class UserActivity extends Component {
         const clickedURLElement = document.createElement('a');
         clickedURLElement.classList.add(ACTIVITY_TITLE_CLASS);
         clickedURLElement.innerText = (action.document && action.document.title) || '';
+        clickedURLElement.title = (action.document && action.document.title) || '';
         clickedURLElement.href = (action.document && action.document.clickUri) || '';
         titleSection.appendChild(clickedURLElement);
 
@@ -506,6 +507,7 @@ export class UserActivity extends Component {
         const el = document.createElement('div');
         el.classList.add(ACTIVITY_TITLE_CLASS);
         el.innerText = content;
+        el.title = content;
         return el;
     }