Display issue with long record names

[FelixMalfait]

We don't display longer names properly.

This is especially bad on the opportunity object where names tend to be long:

cc @Bonapara

[greptile-apps]

To fix the display issue with long record names, update the CSS in RecordShowPage.tsx and RecordShowContainer.tsx to handle text overflow. Specifically, add the following styles to the relevant elements:

1. In RecordShowPage.tsx, locate the PageHeader component and add a class for handling long text:

<PageHeader
  title={pageName ?? ''}
  hasBackButton
  Icon={headerIcon}
  loading={loading}
  className="page-header"
>

2. In the corresponding CSS file, add:

.page-header {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. In RecordShowContainer.tsx, locate the ShowPageSummaryCard component and add a class for handling long text:

<ShowPageSummaryCard
  id={objectRecordId}
  logoOrAvatar={recordIdentifier?.avatarUrl ?? ''}
  avatarPlaceholder={recordIdentifier?.name ?? ''}
  date={recordFromStore.createdAt ?? ''}
  loading={isPrefetchLoading || loading || recordLoading}
  title={
    <FieldContext.Provider
      value={{
        entityId: objectRecordId,
        recoilScopeId: objectRecordId + labelIdentifierFieldMetadataItem?.id,
        isLabelIdentifier: false,
        fieldDefinition: {
          type: labelIdentifierFieldMetadataItem?.type || FieldMetadataType.Text,
          iconName: '',
          fieldMetadataId: labelIdentifierFieldMetadataItem?.id ?? '',
          label: labelIdentifierFieldMetadataItem?.label || '',
          metadata: {
            fieldName: labelIdentifierFieldMetadataItem?.name || '',
            objectMetadataNameSingular: objectNameSingular,
          },
          defaultValue: labelIdentifierFieldMetadataItem?.defaultValue,
        },
        useUpdateRecord: useUpdateOneObjectRecordMutation,
        hotkeyScope: InlineCellHotkeyScope.InlineCell,
        isCentered: true,
      }}
    >
      <RecordInlineCell readonly={isReadOnly} className="record-inline-cell" />
    </FieldContext.Provider>
  }
  avatarType={recordIdentifier?.avatarType ?? 'rounded'}
  onUploadPicture={
    objectNameSingular === 'person' ? onUploadPicture : undefined
  }
/>

4. In the corresponding CSS file, add:

.record-inline-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

These changes will ensure that long record names are properly truncated with ellipsis.

References

/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
/packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Ask Greptile · Edit Issue Bot Settings

[RobertoSimonini1]

what should be done?
wrap the sentence, scale down the size of the text or truncate the string?

I would like to fix the issue

[Bonapara]

We should truncate the text and maintain a 12px padding on the left and right to keep it aligned with the fields:

Also we should display a tooltip on hover (after a small delay like 300ms) to display the full name

[cooldude6000]

Is this issue open ? Can i take it?

[Bonapara]

@RobertoSimonini1 do you want it? Otherwise I'll assign you @gowreesh369, but in the meantime you can look our other
Good First Issues: https://github.com/twentyhq/twenty/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22+no%3Aassignee

[RobertoSimonini1]

@Bonapara yes, I would like to solve it :)

[Bonapara]

Thanks @RobertoSimonini1 !

[RobertoSimonini1]

hi guys, I'm working on the issue now since I was a bit busy last days, btw, I think we should set some variables setting the max lenght of the string and use those instead of writing numbers in the code, what do you think?
Now I'm gonna open a PR and maybe we can discuss there

[FelixMalfait]

Answered in the PR. I think you should use CSS ellipsis and base it on the parent container's size, not hardcode values. Thanks!