From 183cf6c8035b0d65d9007ca74e8fb2babbeeb8ae Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Thu, 22 Jan 2026 20:42:09 +0100
Subject: [PATCH] Shrink table rows (#17360)

We often use the `fr` unit in a CSS grid thinking that it will force the
max-width of the grid's items. However, [`1fr` is always equal to
`minmax(auto, 1fr)`](https://stackoverflow.com/a/52861514). The
consequences are:

- By default, the width of the element will be `1fr`.
- However, if the size of the element becomes wider than the resolved
dimension of `1fr`, the item will expand to match its `auto` width. This
can be easily encountered when an item has a really long text. The
`auto` size will be the dimension of the long text displayed on a single
line.

If you want your element not to overflow, you can use `minmax(0, 1fr)`
instead of `1fr`.

This is a known behavior in the community. CSS frameworks like Tailwind
CSS even made their utility classes setting grid columns use `minmax(0,
xfr)` by default.

<img width="1380" height="84" alt="CleanShot 2026-01-22 at 16 11 00@2x"
src="https://github.com/user-attachments/assets/ace3c862-90ef-4a47-9ad5-9ae8b6e0fe40"
/>

See:
https://www.bigbinary.com/blog/understanding-the-automatic-minimum-size-of-flex-items.

Another fix is to use `min-width: 0;` on items themselves, instead of
using `minmax(0, 1fr)` at the grid level. This would make it possible to
create a reusable `Td` component.

## Data model - fields

### Before
<img width="1120" height="1808" alt="CleanShot 2026-01-22 at 15 46
48@2x"
src="https://github.com/user-attachments/assets/893115f4-219d-4a75-b628-56315298d791"
/>

### After
<img width="1120" height="1808" alt="CleanShot 2026-01-22 at 15 47
00@2x"
src="https://github.com/user-attachments/assets/093ae231-ccae-4df5-8227-a662a3fae97e"
/>

## Data model - relations

### Before
<img width="1172" height="754" alt="CleanShot 2026-01-22 at 16 00 33@2x"
src="https://github.com/user-attachments/assets/3367b849-a4f4-471b-b73a-a80a95368640"
/>

### After
<img width="1146" height="770" alt="CleanShot 2026-01-22 at 16 00 44@2x"
src="https://github.com/user-attachments/assets/ff08556e-fc16-4984-bd4b-bb15f4dabf36"
/>

## Object level object field permission

### Before
<img width="1150" height="1902" alt="CleanShot 2026-01-22 at 15 50
16@2x"
src="https://github.com/user-attachments/assets/adce1ba1-042b-4892-9a0e-af254109d03c"
/>

### After
<img width="1150" height="1902" alt="CleanShot 2026-01-22 at 15 50
01@2x"
src="https://github.com/user-attachments/assets/55476711-2573-43ae-b1d6-b8695f4305ab"
/>
---
 .../components/SettingsObjectFieldItemTableRow.tsx              | 2 +-
 .../components/SettingsObjectRelationItemTableRow.tsx           | 2 +-
 ...sRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
index 47de6464fe..bfe08903e2 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
@@ -37,7 +37,7 @@ type SettingsObjectFieldItemTableRowProps = {
 };
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 148px 148px 36px;
+  grid-template-columns: minmax(0, 1fr) 148px 148px 36px;
 `;
 
 const StyledNameTableCell = styled(TableCell)`
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
index a0075066d9..eb6016391c 100644
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectRelationItemTableRow.tsx
@@ -26,7 +26,7 @@ type SettingsObjectRelationItemTableRowProps = {
 };
 
 export const StyledObjectRelationTableRow = styled(TableRow)`
-  grid-template-columns: 1fr 148px 148px 36px;
+  grid-template-columns: minmax(0, 1fr) 148px 148px 36px;
 `;
 
 const StyledNameTableCell = styled(TableCell)`
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
index 9236bc19f1..ff3c5f535c 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow.tsx
@@ -18,7 +18,7 @@ import { v4 } from 'uuid';
 import { type FieldPermission, RelationType } from '~/generated/graphql';
 
 export const StyledObjectFieldTableRow = styled(TableRow)`
-  grid-template-columns: 180px 1fr 60px 60px;
+  grid-template-columns: 180px minmax(0, 1fr) 60px 60px;
 `;
 
 const StyledNameTableCell = styled(TableCell)`