Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust Floating Input Padding and Border Color #7328

Merged
merged 3 commits into from
Oct 2, 2024
Merged

Adjust Floating Input Padding and Border Color #7328

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26276eb
fix floating input style
nganphan123 Sep 30, 2024
86e7cb9
fix according to feedback
nganphan123 Oct 1, 2024
a97a9e4
small fix
nganphan123 Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/twenty-front/src/modules/ui/field/input/components/TextAreaInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,14 @@ const StyledTextArea = styled(TextareaAutosize)`
resize: none;
max-height: 400px;
width: calc(100% - ${({ theme }) => theme.spacing(7)});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: The width calculation may cause overflow issues. Consider using width: 100% and adjusting padding instead.

padding: 0px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: Setting padding to 0px may cause text to touch the edges of the textarea. Consider using a small padding value instead.

nganphan123 marked this conversation as resolved.
Show resolved Hide resolved
`;

const StyledTextAreaContainer = styled.div`
border: ${({ theme }) => `1px solid ${theme.border.color.light}`};
border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
position: relative;
width: 100%;
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(2)};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
padding: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(0)};

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it is better to directly set padding to 0, instead of setting it to 1 then 0

border-radius: ${({ theme }) => theme.border.radius.sm};
background: ${({ theme }) => theme.background.primary};
`;
Expand Down
Loading