From 2aa5db580b4aef5b75c85f3a90e9c36ae2b0511c Mon Sep 17 00:00:00 2001
From: nitin <142569587+ehconitin@users.noreply.github.com>
Date: Wed, 14 May 2025 16:35:51 +0530
Subject: [PATCH] fix 11997 (#12018)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .github/workflows/preview-env-keepalive.yaml        |  4 +---
 .../ObjectFilterDropdownBooleanSelect.tsx           |  2 +-
 .../components/ObjectFilterDropdownDateInput.tsx    |  6 ++++++
 .../components/ObjectFilterDropdownNumberInput.tsx  |  2 +-
 .../modules/ui/field/input/components/DateInput.tsx |  4 ++--
 .../internal/date/components/InternalDatePicker.tsx | 13 +++++++++----
 .../components/EditableFilterDropdownButton.tsx     |  2 +-
 .../views/components/ViewBarFilterDropdown.tsx      |  2 +-
 8 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/preview-env-keepalive.yaml b/.github/workflows/preview-env-keepalive.yaml
index 4034cb547..e9d1d968e 100644
--- a/.github/workflows/preview-env-keepalive.yaml
+++ b/.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 "CONFIG_VARIABLES_IN_DB_ENABLED=true" >> packages/twenty-docker/.env
-          
+          echo "SIGN_IN_PREFILLED=true" >> packages/twenty-docker/.env
           echo "Docker compose build..."
           cd packages/twenty-docker/
           docker compose build
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
index 168a7be92..0f0baf1e3 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
+++ b/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)}
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
index 921164ccd..8b660df4e 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx
+++ b/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}
     />
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
index a0a81b8b5..f8f89736c 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownNumberInput.tsx
+++ b/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}
diff --git a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
index e921284ea..fffcdbac5 100644
--- a/packages/twenty-front/src/modules/ui/field/input/components/DateInput.tsx
+++ b/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}
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
index 669811b95..800703f68 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
+++ b/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={
diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
index 89d4e0f6d..13f222aac 100644
--- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx
+++ b/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}
       />
     </>
   );
diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
index 62678bde2..fd4822e6f 100644
--- a/packages/twenty-front/src/modules/views/components/ViewBarFilterDropdown.tsx
+++ b/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}
     />
   );
 };