diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.js b/packages/desktop-client/src/components/autocomplete/Autocomplete.js index e2d88053963187014f4ee83a41b7c1b4a4c16181..d6b3a4ea7ad150312925ca25e291a45373877ca6 100644 --- a/packages/desktop-client/src/components/autocomplete/Autocomplete.js +++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.js @@ -424,6 +424,7 @@ function SingleAutocomplete({ padding: 0, backgroundColor: colors.n1, color: 'white', + minWidth: 200, ...tooltipStyle, }} {...tooltipProps} diff --git a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js b/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js deleted file mode 100644 index ae16c28277958c55463dd35dd23c0c43a9a5a404..0000000000000000000000000000000000000000 --- a/packages/desktop-client/src/components/autocomplete/autocomplete-styles.js +++ /dev/null @@ -1,87 +0,0 @@ -import { styles as actualStyles, colors } from '../../style'; - -const colourStyles = { - ...actualStyles.lightScrollbar, - control: styles => ({ - ...styles, - backgroundColor: 'white', - border: '1px solid rgb(208, 208, 208)', - borderRadius: 4, - outline: 0, - marginLeft: -1, - marginRight: 1, - padding: '5px 2px', - fontSize: '13px', - minHeight: 'auto', - }), - input: styles => ({ - ...styles, - padding: '0 2px', - margin: 0, - overflow: 'hidden', - }), - menuPortal: styles => ({ - ...styles, - zIndex: 5000, - minWidth: 200, - }), - menu: (styles, { selectProps }) => ({ - ...styles, - minWidth: 200, - backgroundColor: colors.n1, - marginTop: 2, - marginBottom: 2, - position: selectProps['data-embedded'] ? 'relative' : styles.position, - overflow: 'hidden', - }), - menuList: styles => ({ - ...styles, - padding: 0, - - // Custom scrollbar styling - ...Object.entries(actualStyles.lightScrollbar).reduce( - (carry, [key, value]) => ({ - ...carry, - [key.replace('& ', '')]: value, - }), - {}, - ), - }), - group: styles => ({ - ...styles, - padding: '5px 0 0', - }), - groupHeading: styles => ({ - ...styles, - color: colors.y9, - textTransform: 'none', - paddingLeft: '9px', - fontSize: '100%', - fontWeight: 'normal', - }), - option: (styles, { isFocused }) => ({ - ...styles, - backgroundColor: isFocused ? colors.n5 : undefined, - color: 'white', - padding: '3px 20px', - fontSize: 13, - }), - valueContainer: (styles, { isMulti, selectProps }) => ({ - ...styles, - padding: 'none', - overflow: 'visible', - marginTop: isMulti && selectProps.value?.length ? -4 : undefined, - marginBottom: isMulti && selectProps.value?.length ? -4 : undefined, - }), - clearIndicator: styles => ({ - ...styles, - padding: 'none', - '> svg': { height: 15, width: 15 }, - }), - multiValue: styles => ({ - ...styles, - backgroundColor: colors.b9, - }), -}; - -export default colourStyles; diff --git a/upcoming-release-notes/933.md b/upcoming-release-notes/933.md new file mode 100644 index 0000000000000000000000000000000000000000..d162e46cf1f3628f51002edd9700958eb475ca43 --- /dev/null +++ b/upcoming-release-notes/933.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [MatissJanis] +--- + +Autocomplete: set min-width for the tooltip