From 81ecb7f42b71b10dc4edb7cc46cf72069f394db1 Mon Sep 17 00:00:00 2001 From: Mike Bridge Date: Fri, 10 Apr 2026 13:42:16 -0600 Subject: [PATCH] fix(dashboard): allow filter list to scroll in filter config modal sidebar (#39203) Co-authored-by: Mike Bridge (cherry picked from commit 7a243d329ef7457bbb131808a3132c2ea7bf5037) --- .../ConfigModalSidebar/ConfigModalSidebar.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx index feb6ce87679..03f07951594 100644 --- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx +++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx @@ -36,9 +36,14 @@ import { FilterRemoval } from '../types'; import { FILTER_TYPE, CUSTOMIZATION_TYPE } from '../DraggableFilter'; import { isFilterId, isChartCustomizationId, isDivider } from '../utils'; +// max-height constrains the sidebar so its inner Collapse can scroll when +// there are many filters (sc-101839). The parent height chain through the +// antd Form is unreliable, so a viewport-relative max-height is used instead +// of height: 100%. const StyledSidebarFlex = styled(Flex)` min-width: 290px; max-width: 290px; + max-height: 70vh; border-right: 1px solid ${({ theme }) => theme.colorBorderSecondary}; `; @@ -46,8 +51,13 @@ const StyledHeaderFlex = styled(Flex)` padding: ${({ theme }) => theme.sizeUnit * 3}px; `; +// min-height: 0 lets the flex item shrink below its content size so that +// overflow: auto produces a scrollbar when the filter list is taller than +// the sidebar. Without it, flex items default to min-height: auto and +// refuse to shrink. const BaseStyledCollapse = styled(Collapse)<{ isDragging: boolean }>` flex: 1; + min-height: 0; /* required for flex item to shrink */ overflow: auto; .ant-collapse-content-box { padding: 0;