diff --git a/web/gui-v2/src/components/ListViewTable.jsx b/web/gui-v2/src/components/ListViewTable.jsx index eec3e0df..cc02e75b 100644 --- a/web/gui-v2/src/components/ListViewTable.jsx +++ b/web/gui-v2/src/components/ListViewTable.jsx @@ -430,11 +430,12 @@ const ListViewTable = ({ switch ( colDef.type ) { case 'companyName': case 'dropdown': + // Set a minimum width for the dropdown menu (not the column) let dropdownWidth; - if ( colDef?.minWidth ) { + if ( colDef?.dropdownWidth ) { dropdownWidth = css` .MuiPaper-root { - min-width: ${colDef.minWidth}px; + min-width: ${colDef.dropdownWidth}px; } `; } diff --git a/web/gui-v2/src/static_data/table_columns.js b/web/gui-v2/src/static_data/table_columns.js index 296f5eda..3199872c 100644 --- a/web/gui-v2/src/static_data/table_columns.js +++ b/web/gui-v2/src/static_data/table_columns.js @@ -16,14 +16,23 @@ const styles = { width: 100%; } `, - sliderColumn: css` - min-width: 100px; - width: 120px; +}; - .MuiButtonBase-root { - width: 100%; - } - `, +const columnWidth = (width, isSlider=false) => { + if ( isSlider ) { + return css` + min-width: ${width}px; + width: ${width}px; + + .MuiButtonBase-root { + width: 100%; + } + `; + } else { + return css` + min-width: ${width}px; + `; + } }; /** @@ -86,7 +95,7 @@ const styles = { */ const generateSliderColDef = (dataKey, dataSubkey, extractFn, formatFn) => { return { - css: styles.sliderColumn, + css: columnWidth(120, true), dataKey, dataSubkey, extract: extractFn ?? ((_val, row) => { @@ -105,7 +114,7 @@ const columnDefinitions = [ { title: "Company", key: "name", - css: styles.name, + css: [styles.name, columnWidth(200)], format: (name, row) => ( ), initialCol: true, - minWidth: 240, + dropdownWidth: 240, sortable: true, type: 'companyName', }, { title: "Country", key: "country", + css: columnWidth(120), initialCol: true, - minWidth: 180, + dropdownWidth: 180, type: 'dropdown', }, { title: "Region", key: "continent", + css: columnWidth(100), initialCol: false, - minWidth: 170, + dropdownWidth: 170, type: 'dropdown', }, { title: "Stage", key: "stage", + css: columnWidth(80), initialCol: false, - minWidth: 120, + dropdownWidth: 120, type: 'dropdown', }, {