[D] Superset 6.1.0 – Date Range filter calendar is clipped/overflowing at 100% browser zoom [superset]

["23ami (via GitHub)" <gi...@apache.org>]

GitHub user 23ami created a discussion: Superset 6.1.0 – Date Range filter calendar is clipped/overflowing at 100% browser zoom

Hi Superset team,

I am facing a UI issue with the **Date Range / Time Range filter** in Apache Superset **6.1.0**.

### Environment

* **Apache Superset:** 6.1.0
* **Ant Design:** 5.26.0
* **Browser:** Chrome
* **Deployment:** Docker/Kubernetes
* **Frontend:** Superset frontend with the default/native Date Range filter

### Issue

When I open the **Date Range filter** on a dashboard, the calendar/date picker popup is partially cut off / overflows from its container at **100% browser zoom**.

However, when I change the browser zoom to **75%**, the calendar becomes visible and works correctly.

For example:

**100% zoom:**

The calendar popup is clipped/partially outside the available area.

**75% zoom:**

The complete calendar is displayed correctly.

This makes me suspect that the issue may be related to the **Ant Design DatePicker/RangePicker popup positioning, popup container, or an `overflow` constraint in the Superset filter layout**.

### Impact

This affects the native Date Range filter UI across our dashboards. We have **100+ dashboards**, so changing the configuration/dashboard individually is not a practical solution.

We would prefer to fix this at the common frontend/component level if this is a known issue.

### What I have tried

* Tested at 100% browser zoom → calendar is clipped.
* Tested at 75% browser zoom → calendar displays correctly.
* The issue appears to be related to the UI/layout rather than the backend.
* We are able to modify and rebuild the Superset frontend/Docker image if a source-code change is required.

### Questions

1. Is this a known issue in **Superset 6.1.0** with **Ant Design 5.26.0**?
2. Has anyone experienced the Date Range/Time Range calendar being clipped or incorrectly positioned?
3. Is there a known fix or PR for this issue?
4. Could this be related to the Ant Design DatePicker popup container/positioning or an `overflow` property in the native filter sidebar?
5. If there is no existing fix, which Superset frontend component would be the recommended place to fix this globally?

I can provide screenshots, browser console information, DOM/CSS details, or a minimal reproduction if needed.

Thanks!


GitHub link: https://github.com/apache/superset/discussions/43894

----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

Re: [D] Superset 6.1.0 – Date Range filter calendar is clipped/overflowing at 100% browser zoom [superset]

["FrancescoCastaldi (via GitHub)" <gi...@apache.org>]

GitHub user FrancescoCastaldi added a comment to the discussion: Superset 6.1.0 – Date Range filter calendar is clipped/overflowing at 100% browser zoom

This clipping issue in Superset 6.1.0 occurs because of the transition to Ant Design 5 for Native Filters.

### Root Cause
In `superset-frontend/src/dashboard/components/nativeFilters/FilterBar`, the filter sidebar container has `overflow-y: auto` (or `overflow-x: hidden`). The Ant Design `RangePicker` popup renders inside this container when its `getPopupContainer` prop is tied to the local trigger node instead of `document.body`. At 100% browser zoom, the calendar overlay width and height exceed the visible filter drawer boundaries and are clipped by the parent container overflow. At 75% zoom, the relative viewport dimensions scale down enough to fit within the visible box.

### Solution 1: Global CSS Override (No Code Rebuild)
You can fix this across all dashboards without modifying individual dashboards by injecting CSS into the application layout.

If using a custom theme or injecting custom CSS in `superset_config.py`:
```css
/* Ensure the Ant Design date picker dropdown renders above dashboard elements */
.ant-picker-dropdown {
  z-index: 1060 !important;
  position: fixed !important;
}

/* Allow the filter bar popover container to overflow cleanly */
.filter-bar-container,
.native-filters-sidebar {
  overflow: visible !important;
}
```

### Solution 2: Frontend Component Fix (for Docker Image Rebuilds)
If you rebuild the Superset frontend image, navigate to:
`superset-frontend/plugins/plugin-chart-table/src` or `superset-frontend/src/filters/components/Time/index.tsx` (and `DateFilterPlugin.tsx`).

Ensure the `RangePicker` component specifies:
```tsx
<RangePicker
  getPopupContainer={() => document.body}
  dropdownAlign={{
    points: ['tl', 'bl'],
    offset: [0, 4],
    overflow: { adjustX: true, adjustY: true },
  }}
  {...otherProps}
/>
```
Using `document.body` as the popup container portals the calendar dropdown out of the sidebar DOM hierarchy, preventing any overflow clipping regardless of browser zoom level.


GitHub link: https://github.com/apache/superset/discussions/43894#discussioncomment-19164456

----
This is an automatically sent email for notifications@superset.apache.org.
To unsubscribe, please send an email to: notifications-unsubscribe@superset.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org