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' }}
/>