admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix #10941: Make sure content adjusts itself when resizing cell (#11392)

Browse Source 
Regarding issue #10941:
Previously, when resizing a column relative to the record's name, the
content did not properly adjust to the selected width. This issue
occurred because the parent element (the link) was not a flex container,
preventing the child elements from resizing accordingly.
This fix makes the Chip link inline-flex to allow proper content
adjustment.
Additionally, the Chip itself is now set to width: 100% so that it fully
adapts to its parent.
A small margin of 2 * theme.spacing(1) has also been added to improve
spacing.

Files changed:
packages/twenty-ui/src/components/chip/Chip.tsx
packages/twenty-ui/src/components/chip/LinkChip.tsx

**Video:**

https://github.com/user-attachments/assets/83832c25-0b70-490f-90ed-0d391addf6f8

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Tomás Simões Cândido
2025-05-19 23:43:26 +01:00
committed by GitHub
parent 2477cad989
commit b48c8a11e0
4 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
View File

@ -10,6 +10,7 @@ export const ChipFieldDisplay = () => {
labelIdentifierLink, labelIdentifierLink,
isLabelIdentifierCompact, isLabelIdentifierCompact,
disableChipClick, disableChipClick,
maxWidth,
} = useChipFieldDisplay(); } = useChipFieldDisplay();
if (!isDefined(recordValue)) { if (!isDefined(recordValue)) {
@ -18,6 +19,7 @@ export const ChipFieldDisplay = () => {
return ( return (
<RecordChip <RecordChip
maxWidth={maxWidth}
objectNameSingular={objectNameSingular} objectNameSingular={objectNameSingular}
record={recordValue} record={recordValue}
size={ChipSize.Small} size={ChipSize.Small}

2
packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
View File

@ -19,6 +19,7 @@ export const useChipFieldDisplay = () => {
labelIdentifierLink, labelIdentifierLink,
isLabelIdentifierCompact, isLabelIdentifierCompact,
disableChipClick, disableChipClick,
maxWidth,
} = useContext(FieldContext); } = useContext(FieldContext);
const { chipGeneratorPerObjectPerField } = useContext( const { chipGeneratorPerObjectPerField } = useContext(
@ -50,5 +51,6 @@ export const useChipFieldDisplay = () => {
labelIdentifierLink, labelIdentifierLink,
isLabelIdentifierCompact, isLabelIdentifierCompact,
disableChipClick, disableChipClick,
maxWidth,
}; };
}; };

1
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
View File

@ -48,6 +48,7 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
isLabelIdentifierCompact, isLabelIdentifierCompact,
displayedMaxRows: 1, displayedMaxRows: 1,
isReadOnly: isFieldReadOnly, isReadOnly: isFieldReadOnly,
maxWidth: columnDefinition.size,
}} }}
> >
{children} {children}

1
packages/twenty-ui/src/components/chip/LinkChip.tsx
View File

@ -18,6 +18,7 @@ export type LinkChipProps = Omit<
}; };
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
display: inline-flex;
text-decoration: none; text-decoration: none;
`; `;