Imagine you have a TextMenuItem component, using MenuItem from the Material-UI library, that is part of a chain consisting of DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem. In simple terms, this creates a searchable dropdown element with text items.
However, when the text within the FixedSizeList container is too long, the overflow is hidden making it difficult to read the entire text.
What can be done in this situation? The proposed solution by the Product Manager was to display the full text outside the menu structure, but that doesn't seem like the right approach.
Is there a way, perhaps on mouse hover, to rotate or spin the text so that the content of the menu item can be viewed without the need for an additional pop-out display?
export type TextMenuItemType = FunctionComponent<ITextMenuItemProps>;
const TextMenuItem: TextMenuItemType = (props) => {
const { text, selected, onSelect } = getTextMenuItemProps(props);
const styles = useTextMenuItemStyles();
return (
<MenuItem sx={styles.container} selected={selected} onClick={onSelect}>
<Typography sx={styles.label}>{text}</Typography>
</MenuItem>
);
};
const useTextMenuItemStyles = () => {
return css({
container: {
minHeight: 'auto',
},
label: {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
},
});
};