Adjust Floating Input Padding and Border Color #7328
Conversation
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
This pull request adjusts the styling of the TextAreaInput component to address padding and border color issues, aligning with the desired behavior specified in issue #7286.
- Modified
StyledTextAreaContainerinTextAreaInput.tsxto usetheme.border.color.mediumfor border color - Adjusted padding in
StyledTextAreaContainerto${({ theme }) => theme.spacing(2)}(8px) - Removed
padding: 0px;fromStyledTextAreato allow container padding to take effect - Adjusted
widthinStyledTextAreatocalc(100% - ${({ theme }) => theme.spacing(7)})for proper alignment
1 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings
| @@ -33,13 +33,14 @@ const StyledTextArea = styled(TextareaAutosize)` | |||
| resize: none; | |||
| max-height: 400px; | |||
| width: calc(100% - ${({ theme }) => theme.spacing(7)}); | |||
| padding: 0px; | |||
There was a problem hiding this comment.
style: Setting padding to 0px may cause text to touch the edges of the textarea. Consider using a small padding value instead.
| @@ -33,13 +33,14 @@ const StyledTextArea = styled(TextareaAutosize)` | |||
| resize: none; | |||
| max-height: 400px; | |||
| width: calc(100% - ${({ theme }) => theme.spacing(7)}); | |||
There was a problem hiding this comment.
style: The width calculation may cause overflow issues. Consider using width: 100% and adjusting padding instead.
| position: relative; | ||
| width: 100%; | ||
| padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(1)}; | ||
| padding: ${({ theme }) => theme.spacing(2)}; |
There was a problem hiding this comment.
| padding: ${({ theme }) => theme.spacing(2)}; | |
| padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)}; |
There was a problem hiding this comment.
Hi @martmull , thank you for reviewing. I fixed according to this. I'm new to this repo, could you let me know why this would work better than the other way? Thank you!
There was a problem hiding this comment.
I think it is better to directly set padding to 0, instead of setting it to 1 then 0
packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
Outdated
Show resolved
Hide resolved
This PR fix the padding and border color of floating text input twentyhq#7286 The text area automatically has padding of 4px so I reset it to 0 and adjusting container padding to 8px.
This PR fix the padding and border color of floating text input #7286
The text area automatically has padding of 4px so I reset it to 0 and adjusting container padding to 8px.