twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-29 19:10:19 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(twenty-front): update DateTimeInput styles to apply top border radius to date picker (#5946)

Browse Source 
update DateTimeInput styled components to prevent the StyledInput from
overflowing out of it's parent container

<img width="860" alt="Screenshot 2024-06-19 at 9 55 04 AM"
src="https://github.com/twentyhq/twenty/assets/19223383/8c5daf6a-9eb6-4ecd-a2e9-aa2ba8db3874">



Fixes #5940
This commit is contained in:
Atchyut Preetham Pulavarthi 2024-06-19 18:08:30 +05:30 committed by GitHub
parent 76bcf31341
commit 1c685e8a31
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
View File

@ -12,10 +12,13 @@ import { MAX_DATE } from '@/ui/input/components/internal/date/constants/MaxDate'
import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate'; import { MIN_DATE } from '@/ui/input/components/internal/date/constants/MinDate';
const StyledInputContainer = styled.div` const StyledInputContainer = styled.div`
width: 100%; align-items: center;
display: flex;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-top-left-radius: ${({ theme }) => theme.border.radius.md};
border-top-right-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
height: ${({ theme }) => theme.spacing(8)}; height: ${({ theme }) => theme.spacing(8)};
width: 100%;
`; `;
const StyledInput = styled.input<{ hasError?: boolean }>` const StyledInput = styled.input<{ hasError?: boolean }>`
@ -23,7 +26,7 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
border: none; border: none;
color: ${({ theme }) => theme.font.color.primary}; color: ${({ theme }) => theme.font.color.primary};
outline: none; outline: none;
padding: 8px; padding: 4px 8px 4px 8px;
font-weight: 500; font-weight: 500;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
width: 100%; width: 100%;