Align all field-level UI fix

[ketanMehtaa]

fixed #14695

fixed height and alignment

[greptile-apps]

Greptile Overview

Summary

This PR fixes UI alignment issues in the field-level permissions table header by replacing custom styled checkbox containers with consistent TableCell components. The changes improve visual alignment and consistency with the table design system.

Key Changes

• Removed StyledCheckboxContainer and fixed height styling from StyledSectionHeader
• Replaced custom styled containers with TableCell components for checkbox alignment
• Added imports for TableCell and TableRow components

Minor Issues Found

• Unused TableRow import that should be removed
• Unnecessary React fragment wrapping single component
• Code follows the project's UI consistency patterns and improves the visual alignment as intended

Confidence Score: 4/5

• This PR is safe to merge with minimal risk
• Score reflects a straightforward UI alignment fix using established table components. The changes are cosmetic and improve consistency, with only minor style issues that don't affect functionality
• No files require special attention - this is a simple UI alignment fix

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/field-permissions/components/SettingsRolePermissionsObjectLevelObjectFieldPermissionTableAllHeaderRow.tsx	4/5	UI alignment fix replacing custom styled containers with TableCell components, improves consistency but has minor style issues

Sequence Diagram

sequenceDiagram
    participant User
    participant Component as HeaderRow Component
    participant TableCell
    participant Checkbox as OverridableCheckbox
    participant Hooks as Permission Hooks
    
    User->>Component: Render field permissions header
    Component->>Hooks: useObjectPermissionDerivedStates()
    Hooks-->>Component: cannotAllowFieldReadRestrict, cannotAllowFieldUpdateRestrict
    
    Component->>Component: Calculate shouldShowSeeTableHeader
    Component->>Component: Calculate shouldShowUpdateTableHeader
    
    alt Show Read Permission Header
        Component->>TableCell: Render TableCell (new)
        TableCell->>Checkbox: Render OverridableCheckbox
        Checkbox-->>TableCell: Checkbox UI with proper alignment
        TableCell-->>Component: Aligned cell content
    end
    
    alt Show Update Permission Header  
        Component->>TableCell: Render TableCell (new)
        TableCell->>Checkbox: Render OverridableCheckbox
        Checkbox-->>TableCell: Checkbox UI with proper alignment
        TableCell-->>Component: Aligned cell content
    end
    
    User->>Checkbox: Click checkbox
    Checkbox->>Component: handleReadAllChange() or handleUpdateAllChange()
    Component->>Hooks: restrictReadOnAllFieldsOfObject() or removeReadOverrideOnAllFieldsOfObject()
    Hooks-->>Component: Update permissions state
    Component-->>User: UI reflects updated permissions

Loading

_{1 file reviewed, 2 comments}

_{Edit Code Review Bot Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:53148

This environment will automatically shut down when the PR is closed or after 5 hours.

[charlesBochet]

Hi @ketanMehtaa, thanks for opening a PR

Regarding this one, we have chosen to go with the following implementation: #15023

Sorry we don't merge yours, this is still much appreciated.