Field name is oddly displayed when long (#6755)

### Description

- we added a new styled component to handle the label styles
- we added the title prop, and this will be applied for all fields,
track the styles and only adding the title if the label is hidden would
add unnecessary complexity to this issue, let us know if It's fine
- On our internal QA review, we noticed this extra error in the name:\
when we have spaces between the characters on names the name is
displayed in a weird way


![](https://assets-service.gitstart.com/28455/b3933bec-f5ec-48b9-a627-744507bc9fad.png)

when we don't have spaces we use the space on the right to fit the full
name\
like this:


![](https://assets-service.gitstart.com/28455/77aec9d1-7875-4164-b2ce-97ccee7fb25e.png)Do
you want us to fix this problem too?

when testing the new changes since we changed one component that is used
on the main pages we created objects with a big name, to test the header
on the table view, and we noticed that the object name has exactly the
same issue as the field name on the settings page.


!\[image\](<https://github.com/user-attachments/assets/cfa3a0a3-da98-4b09-9650-178ace05bcbf>)

we added a fix for new field creation if the object name is long


![](https://assets-service.gitstart.com/28455/99faef48-99b4-480e-ae6d-71aa40030434.png)###
Refs

#6738

### Demo


<https://www.loom.com/share/3572fb0c4e994b0aaac52985e76ae4fd?sid=9ef177e2-827b-45f2-8083-60771eef6203>

Fixes #6738

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>

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,15 +15,23 @@ 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) => (
@@ -31,9 +39,13 @@ export const Breadcrumb = ({ className, links }: BreadcrumbProps) => (
     {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' },
                 ]}