From 1c685e8a31d4df57439bb73fb9414de216acaee9 Mon Sep 17 00:00:00 2001
From: Atchyut Preetham Pulavarthi <pulavarthi.preetham@gmail.com>
Date: Wed, 19 Jun 2024 18:08:30 +0530
Subject: [PATCH] fix(twenty-front): update DateTimeInput styles to apply top
 border radius to date picker (#5946)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../internal/date/components/DateTimeInput.tsx           | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
index 5d1033753..fb17e19b9 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
@@ -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%;