From cde2d49c95cb877cc9f4dcfa13fca2244dbb33f4 Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Mon, 3 Feb 2025 18:51:05 +0300
Subject: [PATCH] fix(datepicker): Full width datepicker on filter value select
 (#32064)

---
 .../src/components/DatePicker/index.tsx              | 12 ++++++++++--
 .../components/controls/TimeOffsetControl.tsx        |  4 ----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/components/DatePicker/index.tsx b/superset-frontend/src/components/DatePicker/index.tsx
index ed79c69e9..a9b1f465f 100644
--- a/superset-frontend/src/components/DatePicker/index.tsx
+++ b/superset-frontend/src/components/DatePicker/index.tsx
@@ -16,9 +16,17 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { DatePicker as AntdDatePicker } from 'antd-v5';
+import { DatePicker as AntdDatePicker, DatePickerProps } from 'antd-v5';
+import { css } from '@superset-ui/core';
 
-export const DatePicker = AntdDatePicker;
+export const DatePicker = (props: DatePickerProps) => (
+  <AntdDatePicker
+    css={css`
+      width: 100%;
+    `}
+    {...props}
+  />
+);
 
 // Disable ESLint rule to allow tsc to infer proper type for RangePicker.
 // eslint-disable-next-line prefer-destructuring
diff --git a/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx b/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
index e4a446c71..655d5565f 100644
--- a/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
+++ b/superset-frontend/src/explore/components/controls/TimeOffsetControl.tsx
@@ -23,7 +23,6 @@ import {
   parseDttmToDate,
   BinaryAdhocFilter,
   SimpleAdhocFilter,
-  css,
   customTimeRangeDecode,
   computeCustomDateTime,
   fetchTimeRange,
@@ -223,9 +222,6 @@ export default function TimeOffsetControls({
     <div>
       <ControlHeader {...props} />
       <DatePicker
-        css={css`
-          width: 100%;
-        `}
         onChange={(datetime: Dayjs) =>
           onChange(datetime ? datetime.format(DAYJS_FORMAT) : '')
         }