Field name is oddly displayed when long

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -48,6 +48,12 @@ const StyledNameTableCell = styled(TableCell)`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledNameLabel = styled.div`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const StyledIconTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
@@ -203,9 +209,15 @@ export const SettingsObjectFieldItemTableRow = ({
     >
       <StyledNameTableCell>
         {!!Icon && (
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+          <Icon
+            style={{ minWidth: theme.icon.size.md }}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
         )}
-        {fieldMetadataItem.label}
+        <StyledNameLabel title={fieldMetadataItem.label}>
+          {fieldMetadataItem.label}
+        </StyledNameLabel>
       </StyledNameTableCell>
       <TableCell>{typeLabel}</TableCell>
       <TableCell>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx

@@ -25,6 +25,12 @@ const StyledNameTableCell = styled(TableCell)`
   gap: ${({ theme }) => theme.spacing(2)};
 `;
 
+const StyledNameLabel = styled.div`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
 const StyledActionTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
@@ -46,9 +52,15 @@ export const SettingsObjectMetadataItemTableRow = ({
     <StyledObjectTableRow key={objectMetadataItem.namePlural} to={link}>
       <StyledNameTableCell>
         {!!Icon && (
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+          <Icon
+            style={{ minWidth: theme.icon.size.md }}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
         )}
-        {objectMetadataItem.labelPlural}
+        <StyledNameLabel title={objectMetadataItem.labelPlural}>
+          {objectMetadataItem.labelPlural}
+        </StyledNameLabel>
       </StyledNameTableCell>
       <TableCell>
         <SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />

packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx

@@ -56,7 +56,7 @@ const StyledTitleContainer = styled.div`
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   margin-left: ${({ theme }) => theme.spacing(1)};
-  max-width: 50%;
+  width: 100%;
 `;
 
 const StyledTopBarIconStyledTitleContainer = styled.div`
@@ -65,6 +65,7 @@ const StyledTopBarIconStyledTitleContainer = styled.div`
   flex: 1 0 auto;
   gap: ${({ theme }) => theme.spacing(1)};
   flex-direction: row;
+  width: 100%;
 `;
 
 const StyledPageActionContainer = styled.div`

packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx

@@ -1,10 +1,10 @@
 import styled from '@emotion/styled';
-import { Fragment } from 'react';
+import { CSSProperties, Fragment } from 'react';
 import { Link } from 'react-router-dom';
 
 type BreadcrumbProps = {
   className?: string;
-  links: { children: string; href?: string }[];
+  links: { children: string; href?: string; styles?: CSSProperties }[];
 };
 
 const StyledWrapper = styled.nav`
@@ -15,25 +15,37 @@ const StyledWrapper = styled.nav`
   // font-weight: ${({ theme }) => theme.font.weight.semiBold};
   gap: ${({ theme }) => theme.spacing(2)};
   line-height: ${({ theme }) => theme.text.lineHeight.lg};
+  max-width: 100%;
+  min-width: 0;
 `;
 
 const StyledLink = styled(Link)`
   color: inherit;
   text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledText = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
   <StyledWrapper className={className}>
     {links.map((link, index) => (
       <Fragment key={index}>
         {link.href ? (
-          <StyledLink to={link.href}>{link.children}</StyledLink>
+          <StyledLink style={link.styles} title={link.children} to={link.href}>
+            {link.children}
+          </StyledLink>
         ) : (
-          <StyledText>{link.children}</StyledText>
+          <StyledText style={link.styles} title={link.children}>
+            {link.children}
+          </StyledText>
         )}
         {index < links.length - 1 && '/'}
       </Fragment>

packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx

@@ -8,7 +8,12 @@ import styled from '@emotion/styled';
 import { isNonEmptyString } from '@sniptt/guards';
 import { Link, useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { IconComponent, MOBILE_VIEWPORT, Pill } from 'twenty-ui';
+import {
+  IconComponent,
+  MOBILE_VIEWPORT,
+  Pill,
+  TablerIconsProps,
+} from 'twenty-ui';
 import { isDefined } from '~/utils/isDefined';
 
 const DEFAULT_INDENTATION_LEVEL = 1;
@@ -22,7 +27,7 @@ export type NavigationDrawerItemProps = {
   subItemState?: NavigationDrawerSubItemState;
   to?: string;
   onClick?: () => void;
-  Icon: IconComponent;
+  Icon: IconComponent | ((props: TablerIconsProps) => JSX.Element);
   active?: boolean;
   danger?: boolean;
   soon?: boolean;
@@ -185,7 +190,11 @@ export const NavigationDrawerItem = ({
           <NavigationDrawerItemBreadcrumb state={subItemState} />
         )}
         {Icon && (
-          <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />
+          <Icon
+            style={{ minWidth: theme.icon.size.md }}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.md}
+          />
         )}
         <StyledItemLabel>{label}</StyledItemLabel>
         {soon && <Pill label="Soon" />}

packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx

@@ -176,10 +176,15 @@ export const SettingsObjectFieldEdit = () => {
           title={
             <Breadcrumb
               links={[
-                { children: 'Objects', href: '/settings/objects' },
+                {
+                  children: 'Objects',
+                  href: '/settings/objects',
+                  styles: { minWidth: 'max-content' },
+                },
                 {
                   children: activeObjectMetadataItem.labelPlural,
                   href: `/settings/objects/${objectSlug}`,
+                  styles: { maxWidth: '60%' },
                 },
                 { children: activeMetadataField.label },
               ]}

packages/twenty-front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx

@@ -181,10 +181,15 @@ export const SettingsObjectNewFieldStep2 = () => {
             <SettingsHeaderContainer>
               <Breadcrumb
                 links={[
-                  { children: 'Objects', href: '/settings/objects' },
+                  {
+                    children: 'Objects',
+                    href: '/settings/objects',
+                    styles: { minWidth: 'max-content' },
+                  },
                   {
                     children: activeObjectMetadataItem.labelPlural,
                     href: `/settings/objects/${objectSlug}`,
+                    styles: { maxWidth: '50%' },
                   },
                   { children: 'New Field' },
                 ]}