From f9abea238763e2230f05fba3c0134bc515d24d17 Mon Sep 17 00:00:00 2001
From: Balaji Krishnamurthy <107975017+BKM14@users.noreply.github.com>
Date: Wed, 20 Aug 2025 20:07:24 +0530
Subject: [PATCH] Fix table aligment issue (#13896)

Closes #13862

The `padding-right` for `StyledCheckboxCell` was previously set to
`16px`, causing it to be pushed in. It has now been reduced to `8px`.
The read column in the table appeared as the third column regardless of
whether update was restricted or not. Now, the read column appears as
the last column if update is restricted, otherwise, read appears before
update column.

Attaching a recording for verification:
[Loom
Recording](https://www.loom.com/share/ebd07db6c4d04900aa18f3a1ba71e770?sid=75b33043-dc80-4e2d-82ae-f183efa6faa2)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
---
 ...sObjectLevelObjectFieldPermissionTable.tsx | 33 +++++++-----
 ...ObjectFieldPermissionTableAllHeaderRow.tsx | 52 +++++++++---------
 ...jectLevelObjectFieldPermissionTableRow.tsx | 54 ++++++++++---------
 ...jectLevelObjectFormObjectLevelTableRow.tsx |  2 +-
 4 files changed, 77 insertions(+), 64 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 221d8d97cf..e3348664bf 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
@@ -87,6 +87,12 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTable = ({
       objectMetadataItemId: objectMetadataItem.id,
     });
 
+  const shouldShowSeeTableHeader = !cannotAllowFieldReadRestrict;
+  const shouldShowUpdateTableHeader =
+    !cannotAllowFieldReadRestrict && !cannotAllowFieldUpdateRestrict;
+  const shouldShowEmptyTableHeader =
+    cannotAllowFieldReadRestrict && cannotAllowFieldUpdateRestrict;
+
   return (
     <Section>
       <H2Title
@@ -113,20 +119,19 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTable = ({
           <TableHeader>
             <TableHeaderText>{t`Data type`}</TableHeaderText>
           </TableHeader>
-          {cannotAllowFieldReadRestrict ? (
-            <TableHeader></TableHeader>
-          ) : (
-            <TableHeader>
-              <TableHeaderText>{t`See`}</TableHeaderText>
-            </TableHeader>
-          )}
-          {cannotAllowFieldUpdateRestrict ? (
-            <TableHeader></TableHeader>
-          ) : (
-            <TableHeader>
-              <TableHeaderText>{t`Edit`}</TableHeaderText>
-            </TableHeader>
-          )}
+          <>
+            {shouldShowEmptyTableHeader && <TableHeader />}
+            {shouldShowSeeTableHeader && (
+              <TableHeader>
+                <TableHeaderText>{t`See`}</TableHeaderText>
+              </TableHeader>
+            )}
+            {shouldShowUpdateTableHeader && (
+              <TableHeader>
+                <TableHeaderText>{t`Edit`}</TableHeaderText>
+              </TableHeader>
+            )}
+          </>
         </StyledObjectFieldTableRow>
         <SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow
           roleId={roleId}
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow.tsx
index ec371a6916..15353289ab 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow.tsx
@@ -92,35 +92,39 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHead
       }
     };
 
+    const shouldShowSeeTableHeader = !cannotAllowFieldReadRestrict;
+    const shouldShowUpdateTableHeader =
+      !cannotAllowFieldReadRestrict && !cannotAllowFieldUpdateRestrict;
+    const shouldShowEmptyTableHeader = cannotAllowFieldUpdateRestrict;
+
     return (
       <>
         <StyledSectionHeader>
           <Label>{t`All`}</Label>
           <div></div>
-          {cannotAllowFieldReadRestrict ? (
-            <div></div>
-          ) : (
-            <StyledCheckboxContainer>
-              <OverridableCheckbox
-                disabled={false}
-                checked={true}
-                onChange={handleReadAllChange}
-                type={hasAnyRestrictionOnRead ? 'override' : 'default'}
-              />
-            </StyledCheckboxContainer>
-          )}
-          {cannotAllowFieldUpdateRestrict ? (
-            <div></div>
-          ) : (
-            <StyledCheckboxContainer>
-              <OverridableCheckbox
-                disabled={false}
-                checked={true}
-                onChange={handleUpdateAllChange}
-                type={hasAnyRestrictionOnUpdate ? 'override' : 'default'}
-              />
-            </StyledCheckboxContainer>
-          )}
+          <>
+            {shouldShowEmptyTableHeader && <div />}
+            {shouldShowSeeTableHeader && (
+              <StyledCheckboxContainer>
+                <OverridableCheckbox
+                  disabled={false}
+                  checked={true}
+                  onChange={handleReadAllChange}
+                  type={hasAnyRestrictionOnRead ? 'override' : 'default'}
+                />
+              </StyledCheckboxContainer>
+            )}
+            {shouldShowUpdateTableHeader && (
+              <StyledCheckboxContainer>
+                <OverridableCheckbox
+                  disabled={false}
+                  checked={true}
+                  onChange={handleUpdateAllChange}
+                  type={hasAnyRestrictionOnUpdate ? 'override' : 'default'}
+                />
+              </StyledCheckboxContainer>
+            )}
+          </>
         </StyledSectionHeader>
       </>
     );
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 78a9fd8be3..c1d8045ef5 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
@@ -136,12 +136,17 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
       hasRestriction &&
       fieldPermissionForThisFieldMetadataItem?.canUpdateFieldValue === false;
 
-    const { objectReadIsRestricted, objectUpdateIsRestricted } =
+    const { cannotAllowFieldReadRestrict, cannotAllowFieldUpdateRestrict } =
       useObjectPermissionDerivedStates({
         roleId,
         objectMetadataItemId: objectMetadataItem.id,
       });
 
+    const shouldShowSeeTableHeader = !cannotAllowFieldReadRestrict;
+    const shouldShowUpdateTableHeader =
+      !cannotAllowFieldReadRestrict && !cannotAllowFieldUpdateRestrict;
+    const shouldShowEmptyTableHeader = cannotAllowFieldUpdateRestrict;
+
     return (
       <StyledObjectFieldTableRow>
         <StyledNameTableCell>
@@ -172,30 +177,29 @@ export const SettingsRolePermissionsObjectLevelObjectFieldPermissionTableRow =
             value={fieldType as SettingsFieldType}
           />
         </TableCell>
-        {objectReadIsRestricted ? (
-          <TableCell />
-        ) : (
-          <TableCell>
-            <OverridableCheckbox
-              disabled={fieldMetadataItem.isUIReadOnly ?? false}
-              checked={true}
-              onChange={handleSeeChange}
-              type={isReadRestricted ? 'override' : 'default'}
-            />
-          </TableCell>
-        )}
-        {objectUpdateIsRestricted ? (
-          <TableCell />
-        ) : (
-          <TableCell align="left">
-            <OverridableCheckbox
-              disabled={fieldMetadataItem.isUIReadOnly ?? false}
-              checked={true}
-              onChange={handleUpdateChange}
-              type={isUpdateRestricted ? 'override' : 'default'}
-            />
-          </TableCell>
-        )}
+        <>
+          {shouldShowEmptyTableHeader && <TableCell />}
+          {shouldShowSeeTableHeader && (
+            <TableCell>
+              <OverridableCheckbox
+                disabled={fieldMetadataItem.isUIReadOnly ?? false}
+                checked={true}
+                onChange={handleSeeChange}
+                type={isReadRestricted ? 'override' : 'default'}
+              />
+            </TableCell>
+          )}
+          {shouldShowUpdateTableHeader && (
+            <TableCell align="left">
+              <OverridableCheckbox
+                disabled={fieldMetadataItem.isUIReadOnly ?? false}
+                checked={true}
+                onChange={handleUpdateChange}
+                type={isUpdateRestricted ? 'override' : 'default'}
+              />
+            </TableCell>
+          )}
+        </>
       </StyledObjectFieldTableRow>
     );
   };
diff --git a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
index 21c1ed0842..25d04b8b4c 100644
--- a/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
+++ b/packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/SettingsRolePermissionsObjectLevelObjectFormObjectLevelTableRow.tsx
@@ -50,7 +50,7 @@ const StyledCheckboxCell = styled(TableCell)`
   align-items: center;
   display: flex;
   justify-content: flex-end;
-  padding-right: ${({ theme }) => theme.spacing(4)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
 type OverridableCheckboxType = 'no_cta' | 'default' | 'override';