FIX wrapper anchorOrigin error

CartoDB · Dec 17, 2020 · 2bfafed · 2bfafed
1 parent 6c5aa07
commit 2bfafed
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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) => (
                   <MenuItem