fix: menu popup scroll

Author: gamalielhere

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.4.2
+
+- fix menu popup scroll [#337](https://github.com/MyEtherWallet/mew-components/pull/337)
+
 ### 1.4.1
 
 - dark theme notification slot color issues [#336](https://github.com/MyEtherWallet/mew-components/pull/336)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@myetherwallet/mew-components",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "MEW Components",
   "main": "dist/mew-components.umd.js",
   "module": "dist/mew-components.esm.js",

package.json

@@ -64,48 +64,48 @@ export default {
   props: {
     icon: {
       type: Boolean,
-      default: false
+      default: false,
     },
     outlined: {
       type: Boolean,
-      default: false
+      default: false,
     },
     color: {
       type: String,
-      default: 'white'
+      default: 'white',
     },
     btnTitle: {
       type: String,
-      default: ''
+      default: '',
     },
     btnSize: {
       type: String,
-      default: 'large'
+      default: 'large',
     },
     btnFontSize: {
       type: String,
-      default: '14px'
+      default: '14px',
     },
     btnIcon: {
       type: String,
-      default: ''
+      default: '',
     },
     btnIconSize: {
       type: String,
-      default: '30px'
+      default: '30px',
     },
     left: {
       type: Boolean,
-      default: false
+      default: false,
     },
     right: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
   data() {
     return {
-      show: false
+      show: false,
     };
   },
   computed: {
@@ -140,7 +140,7 @@ export default {
           left: 50%;
           transform: translate(-50%, 0);
       `;
-    }
+    },
   },
   methods: {
     toggleMenu() {
@@ -167,8 +167,8 @@ export default {
         this.show = false;
         window.removeEventListener('click', this.detactOutsideClick);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
@@ -219,7 +219,7 @@ export default {
 .mew-menu-popup-content {
   background-color: white;
   border-radius: 4px;
-  overflow: hidden;
+  overflow: scroll;
   box-shadow: 0 5px 5px -3px rgb(13 41 66 / 20%),
     0 8px 10px 1px rgb(13 41 66 / 14%), 0 3px 14px 2px rgb(13 41 66 / 12%);
   position: absolute;

src/components/MewMenuPopup/MewMenuPopup.vue

@@ -1,9 +1,4 @@
-import {
-  withKnobs,
-  boolean,
-  text,
-  optionsKnob
-} from '@storybook/addon-knobs';
+import { withKnobs, boolean, text, optionsKnob } from '@storybook/addon-knobs';
 import MewMenuPopup from '@/components/MewMenuPopup/MewMenuPopup.vue';
 import MewMenuDoc from './MewMenuPopup.mdx';
 
@@ -13,57 +8,62 @@ export default {
     component: MewMenuPopup,
     docs: {
       page: MewMenuDoc,
-      inlineStories: true
-    }
+      inlineStories: true,
+    },
   },
-  decorators: [withKnobs]
+  decorators: [withKnobs],
 };
 
 const btnSizeOptions = {
   'x-small': 'x-small',
   small: 'small',
   default: 'default',
   large: 'large',
-  'x-large': 'x-large'
+  'x-large': 'x-large',
 };
 
 // used to display options on knob
 const optionsObj = {
-  display: 'inline-radio'
+  display: 'inline-radio',
 };
 
 export const MEWMenuPopup = () => ({
   components: { MewMenuPopup },
   props: {
     btnTitle: {
-      default: text('btn-title', 'Click')
+      default: text('btn-title', 'Click'),
     },
     btnSize: {
-      default: optionsKnob('btn-size', btnSizeOptions, btnSizeOptions.large , optionsObj)
+      default: optionsKnob(
+        'btn-size',
+        btnSizeOptions,
+        btnSizeOptions.large,
+        optionsObj
+      ),
     },
     left: {
-      default: boolean('left', false)
+      default: boolean('left', false),
     },
     right: {
-      default: boolean('right', false)
+      default: boolean('right', false),
     },
     icon: {
-      default: boolean('icon', false)
+      default: boolean('icon', false),
     },
     outlined: {
-      default: boolean('outlined', false)
+      default: boolean('outlined', false),
     },
     btnFontSize: {
-      default: text('btn-font-size', '12px')
+      default: text('btn-font-size', '12px'),
     },
     color: {
-      default: text('color', 'primary')
-    }
+      default: text('color', 'primary'),
+    },
   },
   watch: {
     enableDarkMode(newVal) {
       this.$vuetify.theme.dark = newVal === true ? true : false;
-    }
+    },
   },
   template: `
   <div class="bgStorybook pa-15" style="display: inline-block; margin: 0 auto">
@@ -85,5 +85,5 @@ export const MEWMenuPopup = () => ({
         </ul>
       </div>
     </mew-menu-popup>
-  </div>`
+  </div>`,
 });