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 <[email protected]> Co-authored-by: Marie Stoppa <[email protected]>
twentyhq · Sep 3, 2024 · 8f65326 · 8f65326
1 parent bc2227d
commit 8f65326
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 14 deletions.
diff --git a/...modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/...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>

diff --git a/.../src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/.../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} />

diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/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`

diff --git a/packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx b/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>

diff --git a/...nty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/...nty-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" />}

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/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 },
               ]}

diff --git a/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/...ront/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' },
                 ]}