Title overflow #9009
Title overflow #9009
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This PR modifies the Chip and AvatarChip components to fix task name overflow issues, ensuring proper text truncation and accessibility of UI elements like select boxes in the Kanban board view.
- Changed
justify-contentfrom 'center' to 'flex-start' inpackages/twenty-ui/src/display/chip/components/Chip.tsxfor better text alignment - Added
width: inherittoStyledContainerin Chip component to support proper text truncation - Introduced new
linkWidthprop inpackages/twenty-ui/src/display/chip/components/AvatarChip.tsxwith conditional width-constrained rendering - Set fixed
linkWidth={150}inRecordIndexRecordChipcomponent for consistent truncation behavior - Added
StyledLinkWidthForcedcomponent in AvatarChip for width-constrained scenarios
3 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| @@ -37,6 +37,7 @@ export const RecordIdentifierChip = ({ | |||
| LeftIcon={LeftIcon} | |||
| LeftIconColor={LeftIconColor} | |||
| size={size} | |||
| linkWidth={150} | |||
There was a problem hiding this comment.
style: Consider making linkWidth configurable via props rather than hardcoding to 150px. Different contexts may need different widths.
There was a problem hiding this comment.
PR Summary
(updates since last review)
This PR continues the work on fixing task name overflow issues in the Kanban board by implementing maxWidth constraints across the component hierarchy.
- Added
maxWidth={150}prop toRecordIdentifierChipinRecordBoardCard.tsxto enforce consistent truncation - Modified
StyledContainerinChip.tsxto properly handle maxWidth with padding calculations - Added maxWidth prop support to
AvatarChipcomponent for proper overflow handling - Ensured maxWidth propagates through component hierarchy from
RecordIndexRecordChipto child components
4 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile
...ront/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
Show resolved
Hide resolved
| @@ -106,14 +108,15 @@ export const AvatarChip = ({ | |||
| clickable={isDefined(onClick) || isDefined(to)} | |||
| onClick={to ? undefined : onClick} | |||
There was a problem hiding this comment.
logic: onClick handler is passed twice - both to StyledLink and Chip when 'to' is defined. This could cause the handler to fire twice.
|
Thanks @guillim for your contribution! |
fix #8803