From f1b6ec59cca346443b66181e97c01a29dcfbeb99 Mon Sep 17 00:00:00 2001
From: "twill-hq[bot]" <226015404+twill-hq[bot]@users.noreply.github.com>
Date: Fri, 24 Oct 2025 15:01:00 +0200
Subject: [PATCH] Align all field-level permissions (#15023)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
# Review Issue #14695 on TwentyHQ GitHub
**Twill Task:** https://twill.ai/twentyhq/ENG/tasks/5
## Summary
This PR addresses issue #14695 from the TwentyHQ GitHub repository. The
changes review and implement solutions related to the reported issue.
## Changes Made
- Reviewed issue #14695 and analyzed the problem context
- Implemented necessary fixes or improvements based on issue
requirements
- Updated relevant files and components affected by the issue
## Context
For detailed task context and preview, please refer to the [Twill
task](https://twill.ai/twentyhq/ENG/tasks/5).
---
*Note: Please review the file changes for specific implementation
details.*
📸 Screenshots
Playwright test screenshots captured during development:
### field-permissions-after-fix.png

### field-permissions-table-with-fix.png

---------
Co-authored-by: Twill
Co-authored-by: Claude
Co-authored-by: Charles Bochet
---
...rmissionsObjectLevelObjectFieldPermissionTable.tsx | 11 ++++-------
.../object-form/components/OverridableCheckbox.tsx | 9 +++------
2 files changed, 7 insertions(+), 13 deletions(-)
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
index 27d1c99f8f9..eefff93931d 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTable.tsx
@@ -1,8 +1,10 @@
import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { filterUserFacingFieldMetadataItems } from '@/object-metadata/utils/filterUserFacingFieldMetadataItems';
import { SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow';
-import { SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow';
-import { FIELD_LEVEL_PERMISSION_TABLE_GRID_TEMPLATE_COLUMNS } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/constants/FieldLevelPermissionTableGridTemplateColumns';
+import {
+ SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow,
+ StyledObjectFieldTableRow,
+} from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow';
import { useObjectPermissionDerivedStates } from '@/settings/roles/role-permissions/object-level-permissions/field-permissions/hooks/useObjectPermissionDerivedStates';
import { settingsDraftRoleFamilyState } from '@/settings/roles/states/settingsDraftRoleFamilyState';
import { type OrderBy } from '@/types/OrderBy';
@@ -11,7 +13,6 @@ import { SortableTableHeader } from '@/ui/layout/table/components/SortableTableH
import { Table } from '@/ui/layout/table/components/Table';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableHeaderText } from '@/ui/layout/table/components/TableHeaderText';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
import { sortedFieldByTableFamilyState } from '@/ui/layout/table/states/sortedFieldByTableFamilyState';
import styled from '@emotion/styled';
import { useLingui } from '@lingui/react/macro';
@@ -31,10 +32,6 @@ const StyledSearchInput = styled(SettingsTextInput)`
width: 100%;
`;
-const StyledObjectFieldTableRow = styled(TableRow)`
- grid-auto-columns: ${FIELD_LEVEL_PERMISSION_TABLE_GRID_TEMPLATE_COLUMNS};
-`;
-
export type SettingsRolePermissionsObjectLevelObjectFieldPermissionTableProps =
{
objectMetadataItem: ObjectMetadataItem;
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
index 898c2f65c15..e7cb24fe4dc 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
@@ -1,5 +1,3 @@
-import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
-import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconReload, IconX } from 'twenty-ui/display';
@@ -12,16 +10,15 @@ const StyledOverridableCheckboxContainer = styled.div`
align-items: center;
display: inline-flex;
justify-content: flex-start;
- width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
- RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
+ width: ${({ theme }) => theme.icon.size.xl * 2}px;
`;
const StyledOverridableCheckboxContainerItem = styled.div`
align-items: center;
display: flex;
- height: 24px;
+ height: ${({ theme }) => theme.icon.size.xl}px;
justify-content: center;
- width: 24px;
+ width: ${({ theme }) => theme.icon.size.xl}px;
`;
const StyledIconWrapper = styled.div<{