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"
/>

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)`

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)`

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)`