diff --git a/src/ui/stories/widgets/WrapperWidgetUI.stories.js b/src/ui/stories/widgets/WrapperWidgetUI.stories.js index 3cb7e004f..de6d40f6f 100644 --- a/src/ui/stories/widgets/WrapperWidgetUI.stories.js +++ b/src/ui/stories/widgets/WrapperWidgetUI.stories.js @@ -59,7 +59,14 @@ WithOptions.args = { title: 'Wrapper with options', options: [ { id: 'o1', name: 'Option 1', action: () => alert('Option 1!') }, - { id: 'o2', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o2', name: 'Option 2 too long', action: () => alert('Option 2!') }, + { id: 'o3', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o4', name: 'Option 2 too long here', action: () => alert('Option 2!') }, + { id: 'o5', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o6', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o7', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o8', name: 'Option 2', action: () => alert('Option 2!') }, + { id: 'o9', name: 'Option 2', action: () => alert('Option 2!') }, ], }; diff --git a/src/ui/widgets/WrapperWidgetUI.js b/src/ui/widgets/WrapperWidgetUI.js index fb888c8f1..854bb55f9 100644 --- a/src/ui/widgets/WrapperWidgetUI.js +++ b/src/ui/widgets/WrapperWidgetUI.js @@ -51,6 +51,11 @@ const useStyles = makeStyles((theme) => ({ height: '56px', padding: theme.spacing(1.25, 1.25, 1.25, 3), }, + optionsMenu: { + marginTop: theme.spacing(6), + maxHeight: theme.spacing(21), + minWidth: theme.spacing(16), + }, button: { padding: 0, cursor: (props) => (props.expandable ? 'pointer' : 'default'), @@ -162,7 +167,7 @@ function WrapperWidgetUI(props) { id='options-menu' elevation={3} anchorOrigin={{ - vertical: 'bottom', + vertical: 'top', horizontal: 'right', }} transformOrigin={{ @@ -173,13 +178,7 @@ function WrapperWidgetUI(props) { keepMounted open={open} onClose={handleClose} - PaperProps={{ - style: { - marginTop: '48px', - maxHeight: '144px', - width: '128px', - }, - }} + PaperProps={{ className: classes.optionsMenu }} > {options.map((option) => (