Added tooltip on overflowing texts (#771)

* Ok

* Fixes

* Fix according to PR

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -18,6 +18,8 @@ import {
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
+import { OverflowingTextWithTooltip } from '../../../ui/tooltip/OverflowingTextWithTooltip';
+
 const StyledMainContainer = styled.div`
   align-items: flex-start;
   align-self: stretch;
@@ -144,17 +146,15 @@ const StyledCardTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
+
+  width: 100%;
 `;
 
 const StyledCardContent = styled.div`
-  -webkit-box-orient: vertical;
-
-  -webkit-line-clamp: 3;
   align-self: stretch;
   color: ${({ theme }) => theme.font.color.secondary};
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+  width: 100%;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -279,10 +279,18 @@ export function Timeline({ entity }: { entity: CommentableEntity }) {
                     }
                   >
                     <StyledCardTitle>
-                      {commentThread.title ? commentThread.title : '(No title)'}
+                      <OverflowingTextWithTooltip
+                        text={
+                          commentThread.title
+                            ? commentThread.title
+                            : '(No title)'
+                        }
+                      />
                     </StyledCardTitle>
                     <StyledCardContent>
-                      {body ? body : '(No content)'}
+                      <OverflowingTextWithTooltip
+                        text={body ? body : '(No content)'}
+                      />
                     </StyledCardContent>
                   </StyledCard>
                 </StyledCardContainer>