fix(dashboard): allow filter list to scroll in filter config modal sidebar (#39203)

Co-authored-by: Mike Bridge <michael.bridge@ext.preset.io>
This commit is contained in:
Mike Bridge
2026-04-10 13:42:16 -06:00
committed by GitHub
parent 98146251c4
commit 7a243d329e

View File

@@ -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;