The button is wider than the context menu when not using bootstrap-vue

[guyguy2001]

Description

When I use the context menu in a project, the buttons seem to be wider than the context menu holding them:
image

In addition, when running in chrome, there is a blue outline to the menu.

Steps to Reproduce

Either clone https://github.com/guyguy2001/vue-context-reproduction and run it via npm i, npm run serve, or:

1. Init a new vue project via vue create vue-context-reproduction (I used the default babel + eslint setup).
2. Copy the html and the javascript into either App.vue or HelloWorld.vue, and modify them to fit inside the component (Make sure to remove the li styling from the example component).
3. Run via npm install vue-context, npm install, npm run serve.

Expected behavior: [What did you expect to happen]
A normal context menu appearing, like in the example screenshots.

Actual behavior: [What actually happens]
The context menu appears, but has a blue outline (Only on chrome), and the buttons are wider than the context box, meaning that the text is centered weirdly, and when I hover over a button, its background is too wide.

Reproduces how often: [What percentage of the time does it reproduce?]
The problem occurs consistantly, whenever I run the project.

Version

Version: 4.0.1 (doesn't happen on 3.4.0)
Chrome: Version 74.0.3729.169 (Official Build) (64-bit)
Firefox: 64.0 (64-bit)

[guyguy2001]

If someone can confirm that this is an error in the library and not in my usage of it, I can fix it in a PR.

[ChuckFields]

@guyguy2001 This is interesting. I have not experienced this issue when using this library in my project, however, I submitted a different issue here and in the link I used to reproduce that issue, i'm experiencing this issue.

[guyguy2001]

Weird...
@ChuckFields, are you sure you were using the 4.x version of the library in your project?
And could you share the way you used it in your project, and the css that affected it?

[ChuckFields]

@guyguy2001 Ah... In my project I'm doing this:

* {
  box-sizing: border-box;
}

Which fixes the issue.
To understand this deeper, check this out
The width of .v-context > li > a is 100%
Which does not account for the padding of 'a', which pushes everything out.
Which is why box-sizing: border-box; fixes this issue.
This means, removing .v-context > li > a width: 100% will fix the issue as well, which I think is the right solution.
I don't know what rippling effects this might have though.

[guyguy2001]

I just forked the repo, and it seems that it works in their example file (https://github.com/rawilk/vue-context/blob/master/test/index.html), because they use bootstrap-vue.
I fixed this issue and the blue outline on my fork - guyguy2001@f8d9ab9.
@rawilk, is this module supposed to work without bootstrap-vue, or did I miss anything?
If so, I'll add a second html file which doesn't use bootstrap to the test folder, and PR.

[rawilk]

@guyguy2001 The module should work fine without bootstrap. If you look closely, you'll see I'm not using bootstrap-vue, but just the style sheet from bootstrap itself. If you look at the documentation site (https://vue-context.com) in chrome, you'll notice the menu actually receives the blue outline like you are describing. Since I focus the menu when opening it, it receives the outline from the browser stylesheets.

This may be desireable for some people, but for most they probably don't want that outline. I'll be publishing a patch update later that removes that outline when focusing the menu and also the outline from any <a> tags that receive focus inside the menu. It should also be fixing the the width issue by applying box-sizing: border-box to the menu and removing the width: 100% from the <a> tags as @ChuckFields suggested.