[Fix] - Trim Names in Settings > Members table #7509 (#7525)

Issue: Long names in the Members table were overflowing, affecting the
layout.

Fix:
- Trimmed long names with ellipses.
- Added tooltips to display the full content on hover.
- Max-width of the text dynamically set to 90px on large screens, and
60px on mobile.

![image](https://github.com/user-attachments/assets/3b5d1c08-fe0e-4c0b-952a-0fc0f9e513bc)

---------

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

packages/twenty-front/src/modules/ui/layout/table/components/TableRow.tsx

@@ -1,6 +1,7 @@
-import { Link } from 'react-router-dom';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+import { MOBILE_VIEWPORT } from 'twenty-ui';
 
 const StyledTableRow = styled('div', {
   shouldForwardProp: (prop) =>
@@ -10,12 +11,19 @@ const StyledTableRow = styled('div', {
   onClick?: () => void;
   to?: string;
   gridAutoColumns?: string;
+  mobileGridAutoColumns?: string;
 }>`
   background-color: ${({ isSelected, theme }) =>
     isSelected ? theme.accent.quaternary : 'transparent'};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   display: grid;
   grid-auto-columns: ${({ gridAutoColumns }) => gridAutoColumns ?? '1fr'};
+
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    grid-auto-columns: ${({ mobileGridAutoColumns, gridAutoColumns }) =>
+      mobileGridAutoColumns ?? gridAutoColumns ?? '1fr'};
+  }
+
   grid-auto-flow: column;
   transition: background-color
     ${({ theme }) => theme.animation.duration.normal}s;
@@ -35,6 +43,7 @@ type TableRowProps = {
   to?: string;
   className?: string;
   gridAutoColumns?: string;
+  mobileGridAutoColumns?: string;
 };
 
 export const TableRow = ({
@@ -44,12 +53,14 @@ export const TableRow = ({
   className,
   children,
   gridAutoColumns,
+  mobileGridAutoColumns,
 }: React.PropsWithChildren<TableRowProps>) => (
   <StyledTableRow
     isSelected={isSelected}
     onClick={onClick}
     gridAutoColumns={gridAutoColumns}
     className={className}
+    mobileGridAutoColumns={mobileGridAutoColumns}
     to={to}
     as={to ? Link : 'div'}
   >