fix(chip): update padding for transparent variant (#7164) #8823
Conversation
Changed the padding-left for the chip component when the variant is Transparent. The padding-left is now set to 2px to ensure proper alignment, while other variants continue to use the default horizontal padding.
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Updated padding for the Transparent variant of the Chip component to improve alignment in kanban cards and record pages.
- Modified
packages/twenty-ui/src/display/chip/components/Chip.tsxto set left padding to 2px for Transparent variant - Asymmetric padding applied only to left side to match design requirements for 'Created by' chip
- Used !important flag to override existing padding rules, which may need review for maintainability
- Change affects only Transparent variant while preserving default horizontal padding for other variants
💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings | Greptile
| padding-left: ${({ variant }) => | ||
| variant === ChipVariant.Transparent | ||
| ? '2px !important' | ||
| : 'var(--chip-horizontal-padding)'}; |
There was a problem hiding this comment.
style: using !important should be avoided - consider restructuring CSS specificity instead
|
Thanks for the PR @muraliSingh7! On Figma, the padding-left of the table cells should be 8px. It looks like it's 6px today. Can you fix that at the same time? Desired
Current
|
|
@Bonapara I think I don't have access to edit the Figma files. However, I have made some styling changes directly in the code, which changes the padding to 6px. |
|
I think we misunderstood each other, @muraliSingh7. The padding-left is currently 6px and should be changed to 8px (Figma). Thanks! |
|
@Bonapara I don't have the necessary permissions to edit Figma files. You may reach out to your team members for that. Could you please tag someone from the UI development team to review this UI code fix ? |
|
I think we confused each other @muraliSingh7. It should be changed to 8px in the code, not in Figma. |
- Increased padding-left for table cells from 6px to 8px for uniform spacing. - Set padding to 0px for Chip component in transparent mode to prevent it from affecting cell padding and ensure consistent 8px left padding across all cells.
|
@Bonapara now I understand you want 8px padding-left across all cells. Am I right now? Screenshots after modification : |
|
That's it! Thanks @muraliSingh7 |
|
|
||
| padding-left: ${({ variant }) => | ||
| variant === ChipVariant.Transparent | ||
| ? '0px' |
There was a problem hiding this comment.
Maybe we should use theme.spacing(0);
There was a problem hiding this comment.
@Bonapara please check I have updated it to theme.spacing(0)
|
LGTM. Thanks for your code @muraliSingh7 !!! 🙏 |
This PR addresses the issue described in #7164, where the Chip component's padding for the Transparent variant was not correctly aligned. The following changes have been made:
The padding-left for the Transparent variant is now set to 2px to improve alignment.
Other chip variants retain the default horizontal padding values.
These changes ensure that the Transparent chip variant is rendered consistently with the rest of the design, as described in #7164.
See screenshots below for before and after comparison:
Before:
After:
Please review @Bonapara and let me know if you have any feedback or concerns.