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/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -9,6 +9,8 @@ import {
   beautifyPastDateRelativeToNow,
 } from '~/utils/date-utils';
 
+import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
+
 type OwnProps = {
   id?: string;
   logoOrAvatar?: string;
@@ -31,6 +33,7 @@ const StyledInfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
 `;
 
 const StyledDate = styled.div`
@@ -42,6 +45,8 @@ const StyledTitle = styled.div`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.xl};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
+
+  max-width: 100%;
 `;
 
 const StyledTooltip = styled(Tooltip)`
@@ -50,6 +55,8 @@ const StyledTooltip = styled(Tooltip)`
 
   color: ${({ theme }) => theme.font.color.primary};
 
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
@@ -74,7 +81,9 @@ export function ShowPageSummaryCard({
         placeholder={title}
       />
       <StyledInfoContainer>
-        <StyledTitle>{title}</StyledTitle>
+        <StyledTitle>
+          <OverflowingTextWithTooltip text={title} />
+        </StyledTitle>
         <StyledDate id={dateElementId}>
           Added {beautifiedCreatedAt} ago
         </StyledDate>