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

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

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';
const StyledInputContainer = styled.div`
width: 100%;
display: flex;
align-items: center;
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)};
width: 100%;
`;
const StyledInput = styled.input<{ hasError?: boolean }>`
@ -23,7 +26,7 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
border: none;
color: ${({ theme }) => theme.font.color.primary};
outline: none;
padding: 8px;
padding: 4px 8px 4px 8px;
font-weight: 500;
font-size: ${({ theme }) => theme.font.size.md};
width: 100%;