fix 11997 (#12018)

addressing:
https://github.com/twentyhq/twenty/issues/11997#issuecomment-2875772322
<img width="922" alt="Screenshot 2025-05-13 at 22 52 28"
src="https://github.com/user-attachments/assets/dc3b5fdd-b81b-4732-94f3-2ef2eb0012c2"
/>
before: 


https://github.com/user-attachments/assets/b55bf77e-99bf-485f-bcfa-5d311e7d2bd0

after: 


https://github.com/user-attachments/assets/70fb80b2-ce9f-4a8a-ac5d-d8c793c023be

### Some other issues I found

- On clicking clear, nothing happens

Before:


https://github.com/user-attachments/assets/01e937bb-b4d4-4296-baa7-ec1602de2cc9

After:


https://github.com/user-attachments/assets/8e4e5022-fe32-44fe-a7e4-5c98a7f3c2fa


- same behaviour for inline cell DateInput: 


https://github.com/user-attachments/assets/787354e5-b50a-457c-a392-4779270e2832


### Notes
The root issue seems to be that ViewBarFilterDropdown sets a fixed width
of 208px, which isn’t enough for the calendar to render correctly - it
ends up cropping the content. The fix here is more of a workaround than
a deep fix: I’ve adjusted styles to avoid the cropping, but it might be
worth revisiting how we handle sizing for filter dropdowns in general.

cc @lucasbordeau - thoughts?
Related commit:
https://github.com/twentyhq/twenty/commit/afea017c127b5055ead5170873636c0e81953898

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx

@@ -16,7 +16,6 @@ import {
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
-import { isDefined } from 'twenty-shared/utils';
 import { IconCalendarX } from 'twenty-ui/display';
 import {
   MenuItemLeftContent,
@@ -442,16 +441,22 @@ export const DateTimePicker = ({
 
   const highlightedDates = getHighlightedDates(highlightedDateRange);
 
-  const selectedDates = isRelative ? highlightedDates : [dateToUse];
+  const hasDate = date != null;
+
+  const selectedDates = isRelative
+    ? highlightedDates
+    : hasDate
+      ? [dateToUse]
+      : [];
 
   return (
     <StyledContainer calendarDisabled={isRelative}>
       <div className={clearable ? 'clearable ' : ''}>
         <ReactDatePicker
           open={true}
-          selected={dateToUse}
+          selected={hasDate ? dateToUse : undefined}
           selectedDates={selectedDates}
-          openToDate={isDefined(dateToUse) ? dateToUse : undefined}
+          openToDate={hasDate ? dateToUse : new Date()}
           disabledKeyboardNavigation
           onChange={handleDateChange as any}
           customInput={