From b48c8a11e062c16515c57ffccd53eebd1f2e4946 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Sim=C3=B5es=20C=C3=A2ndido?=
 <tomas6candido@gmail.com>
Date: Mon, 19 May 2025 23:43:26 +0100
Subject: [PATCH] Fix #10941: Make sure content adjusts itself when resizing
 cell (#11392)

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>
---
 .../meta-types/display/components/ChipFieldDisplay.tsx          | 2 ++
 .../record-field/meta-types/hooks/useChipFieldDisplay.ts        | 2 ++
 .../components/RecordTableCellFieldContextLabelIdentifier.tsx   | 1 +
 packages/twenty-ui/src/components/chip/LinkChip.tsx             | 1 +
 4 files changed, 6 insertions(+)

diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
index cc0cf7f60..d8981b3e2 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx
@@ -10,6 +10,7 @@ export const ChipFieldDisplay = () => {
     labelIdentifierLink,
     isLabelIdentifierCompact,
     disableChipClick,
+    maxWidth,
   } = useChipFieldDisplay();
 
   if (!isDefined(recordValue)) {
@@ -18,6 +19,7 @@ export const ChipFieldDisplay = () => {
 
   return (
     <RecordChip
+      maxWidth={maxWidth}
       objectNameSingular={objectNameSingular}
       record={recordValue}
       size={ChipSize.Small}
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
index df37c7571..b001b5322 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts
@@ -19,6 +19,7 @@ export const useChipFieldDisplay = () => {
     labelIdentifierLink,
     isLabelIdentifierCompact,
     disableChipClick,
+    maxWidth,
   } = useContext(FieldContext);
 
   const { chipGeneratorPerObjectPerField } = useContext(
@@ -50,5 +51,6 @@ export const useChipFieldDisplay = () => {
     labelIdentifierLink,
     isLabelIdentifierCompact,
     disableChipClick,
+    maxWidth,
   };
 };
diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
index bee01a16a..29cc44b0c 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFieldContextLabelIdentifier.tsx
@@ -48,6 +48,7 @@ export const RecordTableCellFieldContextLabelIdentifier = ({
         isLabelIdentifierCompact,
         displayedMaxRows: 1,
         isReadOnly: isFieldReadOnly,
+        maxWidth: columnDefinition.size,
       }}
     >
       {children}
diff --git a/packages/twenty-ui/src/components/chip/LinkChip.tsx b/packages/twenty-ui/src/components/chip/LinkChip.tsx
index a7a4bc937..af9c05411 100644
--- a/packages/twenty-ui/src/components/chip/LinkChip.tsx
+++ b/packages/twenty-ui/src/components/chip/LinkChip.tsx
@@ -18,6 +18,7 @@ export type LinkChipProps = Omit<
 };
 
 const StyledLink = styled(Link)`
+  display: inline-flex;
   text-decoration: none;
 `;