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:
afea017c12

---------

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

.github/workflows/preview-env-keepalive.yaml

@@ -33,9 +33,7 @@ jobs:
           echo "# === Randomly generated secrets ===" >> packages/twenty-docker/.env
           echo "APP_SECRET=$(openssl rand -base64 32)" >> packages/twenty-docker/.env
           echo "PG_DATABASE_PASSWORD=$(openssl rand -hex 16)" >> packages/twenty-docker/.env
-          # Remove line below when true becomes the default value (soon)
+          echo "SIGN_IN_PREFILLED=true" >> packages/twenty-docker/.env
-          echo "CONFIG_VARIABLES_IN_DB_ENABLED=true" >> packages/twenty-docker/.env
-          
           echo "Docker compose build..."
           cd packages/twenty-docker/
           docker compose build

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx

@@ -56,7 +56,7 @@ export const ObjectFilterDropdownBooleanSelect = () => {
       selectableItemIdArray={options.map((option) => option.toString())}
       hotkeyScope={SingleRecordPickerHotkeyScope.SingleRecordPicker}
     >
-      <DropdownMenuItemsContainer hasMaxHeight>
+      <DropdownMenuItemsContainer hasMaxHeight width="auto">
         {options.map((option) => (
           <StyledBooleanSelectContainer
             key={String(option)}

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -81,6 +81,11 @@ export const ObjectFilterDropdownDateInput = () => {
   const isRelativeOperand =
     selectedOperandInDropdown === ViewFilterOperand.IsRelative;
 
+  const handleClear = () => {
+    isRelativeOperand
+      ? handleRelativeDateChange(null)
+      : handleAbsoluteDateChange(null);
+  };
   const resolvedValue = objectFilterDropdownCurrentRecordFilter
     ? resolveDateViewFilterValue(objectFilterDropdownCurrentRecordFilter)
     : null;
@@ -99,6 +104,7 @@ export const ObjectFilterDropdownDateInput = () => {
       onChange={handleAbsoluteDateChange}
       onRelativeDateChange={handleRelativeDateChange}
       isDateTimeInput={isDateTimeInput}
+      onClear={handleClear}
     />
   );
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx

@@ -38,7 +38,7 @@ export const ObjectFilterDropdownNumberInput = () => {
   };
 
   return (
-    <DropdownMenuItemsContainer>
+    <DropdownMenuItemsContainer width="auto">
       <DropdownMenuInput
         ref={handleInputRef}
         value={objectFilterDropdownFilterValue}

packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx

@@ -117,10 +117,10 @@ export const DateInput = ({
   return (
     <div ref={wrapperRef}>
       <DateTimePicker
-        date={internalValue ?? new Date()}
+        date={internalValue ?? null}
         onChange={handleChange}
         onClose={handleClose}
-        clearable={clearable ? clearable : false}
+        clearable={clearable ?? false}
         onEnter={onEnter}
         onEscape={onEscape}
         onClear={handleClear}

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={

packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx

@@ -65,7 +65,7 @@ export const EditableFilterDropdownButton = ({
         dropdownOffset={{ y: 8, x: 0 }}
         dropdownPlacement="bottom-start"
         onClickOutside={handleDropdownClickOutside}
-        dropdownWidth={200}
+        dropdownWidth={280}
       />
     </>
   );

packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx

@@ -51,7 +51,7 @@ export const ViewBarFilterDropdown = ({
       dropdownHotkeyScope={hotkeyScope}
       dropdownOffset={{ y: 8 }}
       onClickOutside={handleDropdownClickOutside}
-      dropdownWidth={208}
+      dropdownWidth={280}
     />
   );
 };