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>

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}

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>
       </>
     );

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>
     );
   };

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';