diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index c717fa4..582ad7a 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -1131,3 +1131,11 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton { top: -16px !important; bottom: -24px !important; } + +/* Size FilterSidebar field selects to the longest label (via labelRender sizer). */ +.filter-sidebar-field-select.ant-select { + width: max-content; +} +.filter-sidebar-field-select .ant-select-selector { + width: max-content !important; +} diff --git a/src/components/Dashboard/common/FilterSidebar.jsx b/src/components/Dashboard/common/FilterSidebar.jsx index cf7d8cc..0db9c42 100644 --- a/src/components/Dashboard/common/FilterSidebar.jsx +++ b/src/components/Dashboard/common/FilterSidebar.jsx @@ -11,6 +11,36 @@ import { import MissingPlaceholder from './MissingPlaceholder' import BinIcon from '../../Icons/BinIcon' +const hiddenSizerStyle = { + gridArea: '1 / 1', + visibility: 'hidden', + whiteSpace: 'nowrap' +} + +const FieldSelectLabel = ({ label, options }) => ( + + + Field + + {options.map((option) => ( + + {option.label} + + ))} + {label} + +) + +FieldSelectLabel.propTypes = { + label: PropTypes.node, + options: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.node, + value: PropTypes.string + }) + ).isRequired +} + const FilterSidebar = ({ type, filter = {}, @@ -169,8 +199,12 @@ const FilterSidebar = ({ value={row.field || undefined} onChange={(v) => changeField(row.field, v)} options={availableOptions(row.field)} - style={{ minWidth: 80 }} allowClear={false} + labelRender={({ label }) => ( + + )} + style={{ flexShrink: 0 }} + classNames={{ root: 'filter-sidebar-field-select' }} />