Fixed: Inline Field data overflowing on Kanban cards

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/AddressFieldDisplay.tsx

@@ -4,7 +4,7 @@ import { useAddressFieldDisplay } from '@/object-record/record-field/meta-types/
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const AddressFieldDisplay = () => {
-  const { fieldValue } = useAddressFieldDisplay();
+  const { fieldValue, maxWidth } = useAddressFieldDisplay();
 
   const content = [
     fieldValue?.addressStreet1,
@@ -15,5 +15,5 @@ export const AddressFieldDisplay = () => {
     .filter(isNonEmptyString)
     .join(', ');
 
-  return <TextDisplay text={content} />;
+  return <TextDisplay text={content} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/FullNameFieldDisplay.tsx

@@ -4,11 +4,11 @@ import { useFullNameFieldDisplay } from '@/object-record/record-field/meta-types
 import { TextDisplay } from '@/ui/field/display/components/TextDisplay';
 
 export const FullNameFieldDisplay = () => {
-  const { fieldValue } = useFullNameFieldDisplay();
+  const { fieldValue, maxWidth } = useFullNameFieldDisplay();
 
   const content = [fieldValue?.firstName, fieldValue?.lastName]
     .filter(isNonEmptyString)
     .join(' ');
 
-  return <TextDisplay text={content} />;
+  return <TextDisplay text={content} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/LinkFieldDisplay.tsx

@@ -2,7 +2,7 @@ import { useLinkFieldDisplay } from '@/object-record/record-field/meta-types/hoo
 import { LinkDisplay } from '@/ui/field/display/components/LinkDisplay';
 
 export const LinkFieldDisplay = () => {
-  const { fieldValue } = useLinkFieldDisplay();
+  const { fieldValue, maxWidth } = useLinkFieldDisplay();
 
-  return <LinkDisplay value={fieldValue} />;
+  return <LinkDisplay value={fieldValue} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx

@@ -2,7 +2,7 @@ import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/h
 import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay';
 
 export const NumberFieldDisplay = () => {
-  const { fieldValue } = useNumberFieldDisplay();
+  const { fieldValue, maxWidth } = useNumberFieldDisplay();
 
-  return <NumberDisplay value={fieldValue} />;
+  return <NumberDisplay value={fieldValue} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFieldDisplay.tsx

@@ -8,7 +8,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getImageAbsoluteURIOrBase64 } from '~/utils/image/getImageAbsoluteURIOrBase64';
 
 export const RelationFieldDisplay = () => {
-  const { fieldValue, fieldDefinition, generateRecordChipData } =
+  const { fieldValue, fieldDefinition, generateRecordChipData, maxWidth } =
     useRelationFieldDisplay();
 
   if (
@@ -33,6 +33,7 @@ export const RelationFieldDisplay = () => {
       avatarType={recordChipData.avatarType}
       avatarUrl={getImageAbsoluteURIOrBase64(recordChipData.avatarUrl) || ''}
       linkToEntity={recordChipData.linkToShowPage}
+      maxWidth={maxWidth}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useAddressFieldDisplay.ts

@@ -6,7 +6,7 @@ import { FieldContext } from '../../contexts/FieldContext';
 import { FieldAddressValue } from '../../types/FieldMetadata';
 
 export const useAddressFieldDisplay = () => {
-  const { entityId, fieldDefinition } = useContext(FieldContext);
+  const { entityId, fieldDefinition, maxWidth } = useContext(FieldContext);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 
@@ -18,5 +18,6 @@ export const useAddressFieldDisplay = () => {
   return {
     fieldDefinition,
     fieldValue,
+    maxWidth,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useFullNameFieldDisplay.ts

@@ -6,7 +6,7 @@ import { useRecordFieldValue } from '@/object-record/record-store/contexts/Recor
 import { FieldContext } from '../../contexts/FieldContext';
 
 export const useFullNameFieldDisplay = () => {
-  const { entityId, fieldDefinition } = useContext(FieldContext);
+  const { entityId, fieldDefinition, maxWidth } = useContext(FieldContext);
 
   const fieldName = fieldDefinition.metadata.fieldName;
 
@@ -18,5 +18,6 @@ export const useFullNameFieldDisplay = () => {
   return {
     fieldDefinition,
     fieldValue,
+    maxWidth,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useLinkFieldDisplay.ts

@@ -6,7 +6,7 @@ import { FieldContext } from '../../contexts/FieldContext';
 import { FieldLinkValue } from '../../types/FieldMetadata';
 
 export const useLinkFieldDisplay = () => {
-  const { entityId, fieldDefinition } = useContext(FieldContext);
+  const { entityId, fieldDefinition, maxWidth } = useContext(FieldContext);
 
   const fieldName = fieldDefinition.metadata.fieldName;
   const fieldValue = useRecordFieldValue<FieldLinkValue | undefined>(
@@ -17,5 +17,6 @@ export const useLinkFieldDisplay = () => {
   return {
     fieldDefinition,
     fieldValue,
+    maxWidth,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberFieldDisplay.ts

@@ -8,7 +8,7 @@ import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 import { isFieldNumber } from '../../types/guards/isFieldNumber';
 
 export const useNumberFieldDisplay = () => {
-  const { entityId, fieldDefinition, hotkeyScope } = useContext(FieldContext);
+  const { entityId, fieldDefinition, hotkeyScope, maxWidth } = useContext(FieldContext);
 
   assertFieldMetadata(FieldMetadataType.Number, isFieldNumber, fieldDefinition);
 
@@ -19,5 +19,6 @@ export const useNumberFieldDisplay = () => {
     fieldDefinition,
     fieldValue,
     hotkeyScope,
+    maxWidth,
   };
 };

packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx

@@ -33,6 +33,7 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
 `;
 
 const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
+  display: flex;
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   font-size: 'inherit';

packages/twenty-front/src/modules/ui/field/display/components/EllipsisDisplay.tsx

@@ -1,7 +1,7 @@
 import { styled } from '@linaria/react';
 
 const StyledEllipsisDisplay = styled.div<{ maxWidth?: number }>`
-  max-width: ${({ maxWidth }) => maxWidth ?? '100%'};
+  max-width: ${({ maxWidth }) => maxWidth ? maxWidth + "px" : '100%'};
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

packages/twenty-front/src/modules/ui/field/display/components/LinkDisplay.tsx

@@ -9,9 +9,10 @@ import {
 
 type LinkDisplayProps = {
   value?: FieldLinkValue;
+  maxWidth?: number;
 };
 
-export const LinkDisplay = ({ value }: LinkDisplayProps) => {
+export const LinkDisplay = ({ value, maxWidth }: LinkDisplayProps) => {
   const url = value?.url;
 
   if (!isNonEmptyString(url)) {
@@ -32,5 +33,5 @@ export const LinkDisplay = ({ value }: LinkDisplayProps) => {
     return <SocialLink href={url} type={type} label={displayedValue} />;
   }
 
-  return <RoundedLink href={url} label={displayedValue} />;
+  return <RoundedLink href={url} label={displayedValue} maxWidth={maxWidth} />;
 };

packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx

@@ -4,8 +4,9 @@ import { EllipsisDisplay } from './EllipsisDisplay';
 
 type NumberDisplayProps = {
   value: string | number | null;
+  maxWidth?: number;
 };
 
-export const NumberDisplay = ({ value }: NumberDisplayProps) => (
-  <EllipsisDisplay>{value && formatNumber(Number(value))}</EllipsisDisplay>
+export const NumberDisplay = ({ value, maxWidth }: NumberDisplayProps) => (
+  <EllipsisDisplay maxWidth={maxWidth}>{value && formatNumber(Number(value))}</EllipsisDisplay>
 );

packages/twenty-front/src/modules/ui/field/display/components/TextDisplay.tsx

@@ -9,6 +9,6 @@ type TextDisplayProps = {
 
 export const TextDisplay = ({ text, maxWidth }: TextDisplayProps) => (
   <EllipsisDisplay maxWidth={maxWidth}>
-    <OverflowingTextWithTooltip text={text} />
+    <OverflowingTextWithTooltip text={text} maxWidth={maxWidth} />
   </EllipsisDisplay>
 );

packages/twenty-front/src/modules/ui/navigation/link/components/RoundedLink.tsx

@@ -6,10 +6,12 @@ import { FONT_COMMON, THEME_COMMON, ThemeContext } from 'twenty-ui';
 type RoundedLinkProps = {
   href: string;
   label?: string;
+  maxWidth?: number;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
 };
 
 const fontSizeMd = FONT_COMMON.size.md;
+const spacingHalf = THEME_COMMON.spacing(0.5);
 const spacing1 = THEME_COMMON.spacing(1);
 const spacing2 = THEME_COMMON.spacing(2);
 
@@ -21,6 +23,7 @@ const StyledLink = styled.a<{
   backgroundHover: string;
   backgroundActive: string;
   border: string;
+  maxWidth: number | undefined;
 }>`
   align-items: center;
   background-color: ${({ background }) => background};
@@ -30,20 +33,17 @@ const StyledLink = styled.a<{
   color: ${({ color }) => color};
 
   cursor: pointer;
-  display: inline-flex;
+  display: inline-block;
   font-weight: ${fontSizeMd};
 
   gap: ${spacing1};
 
-  height: 10px;
-  justify-content: center;
+  justify-content: left;
 
-  max-width: calc(100% - ${spacingMultiplicator} * 2px);
-
-  min-width: fit-content;
+  max-width: calc(${({ maxWidth }) => (maxWidth ? maxWidth + "px": "100%" )} - 2*${spacing2});
 
   overflow: hidden;
-  padding: ${spacing1} ${spacing2};
+  padding: ${spacingHalf} ${spacing2};
 
   text-decoration: none;
   text-overflow: ellipsis;
@@ -59,7 +59,7 @@ const StyledLink = styled.a<{
   }
 `;
 
-export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
+export const RoundedLink = ({ label, href, maxWidth, onClick }: RoundedLinkProps) => {
   const { theme } = useContext(ThemeContext);
 
   const background = theme.background.transparent.lighter;
@@ -89,6 +89,7 @@ export const RoundedLink = ({ label, href, onClick }: RoundedLinkProps) => {
       backgroundHover={backgroundHover}
       backgroundActive={backgroundActive}
       border={border}
+      maxWidth={maxWidth}
     >
       {label}
     </StyledLink>

packages/twenty-ui/src/display/chip/components/Chip.tsx

@@ -123,6 +123,7 @@ export const Chip = ({
   rightComponent,
   accent = ChipAccent.TextPrimary,
   onClick,
+  maxWidth
 }: ChipProps) => {
   return (
     <StyledContainer
@@ -138,6 +139,7 @@ export const Chip = ({
       <OverflowingTextWithTooltip
         size={size === ChipSize.Large ? 'large' : 'small'}
         text={label}
+        maxWidth={maxWidth}
       />
       {rightComponent}
     </StyledContainer>

packages/twenty-ui/src/display/chip/components/EntityChip.tsx

@@ -17,6 +17,7 @@ export type EntityChipProps = {
   variant?: EntityChipVariant;
   LeftIcon?: IconComponent;
   className?: string;
+  maxWidth?: number;
 };
 
 export enum EntityChipVariant {
@@ -33,6 +34,7 @@ export const EntityChip = ({
   variant = EntityChipVariant.Regular,
   LeftIcon,
   className,
+  maxWidth,
 }: EntityChipProps) => {
   const navigate = useNavigate();
   const theme = useTheme();
@@ -70,6 +72,7 @@ export const EntityChip = ({
       clickable={!!linkToEntity}
       onClick={handleLinkClick}
       className={className}
+      maxWidth={maxWidth}
     />
   );
 };

packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx

@@ -11,13 +11,14 @@ const spacing4 = THEME_COMMON.spacing(4);
 const StyledOverflowingText = styled.div<{
   cursorPointer: boolean;
   size: 'large' | 'small';
+  maxWidth: number | undefined;
 }>`
   cursor: ${({ cursorPointer }) => (cursorPointer ? 'pointer' : 'inherit')};
   font-family: inherit;
   font-size: inherit;
 
   font-weight: inherit;
-  max-width: 100%;
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth + "px": "100%" )};
   overflow: hidden;
   text-decoration: inherit;
 
@@ -38,10 +39,12 @@ export const OverflowingTextWithTooltip = ({
   size = 'small',
   text,
   mutliline,
+  maxWidth
 }: {
   size?: 'large' | 'small';
   text: string | null | undefined;
   mutliline?: boolean;
+  maxWidth?: number
 }) => {
   const textElementId = `title-id-${+new Date()}`;
 
@@ -78,6 +81,7 @@ export const OverflowingTextWithTooltip = ({
         id={textElementId}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        maxWidth={maxWidth}
       >
         {text}
       </StyledOverflowingText>