Dropdown should allow different border width

[maximmold]

Steps

1. Run the JSfiddle showing an attempt to increase the width of the dropdown border
2. Observe behavior in Chrome and Safari at certain screen widths

Expected Result

The width of the bottom part of the drop down always matches the width of the top part

Actual Result

Sometimes the width of the bottom part of the drop down doesn't match the width of the top part

Version

2.4.1

Testcase

https://jsfiddle.net/maximmold/7zpsLyoq/46

[maximmold]

Please note we were basically trying to reverse engineer the code to expand the border width. I took the html from another page where the dropdown was already expanded to play around with it without having to click on the drop down to expand it.

[maximmold]

This seems to only be an issue when the width is not being defined via the min-width. For example, this one looks okay with a min-width of 8em https://jsfiddle.net/maximmold/7zpsLyoq/82/.
But this one does not https://jsfiddle.net/maximmold/7zpsLyoq/88/ with 5em. It manifests itself in less contrived ways on some of our other pages.

[maximmold]

I have a hack to fix this which entails ensuring widths are only ever whole numbers.
this.selector().dropdown({ onChange: this.props.onChange, onShow: () => { const width = Math.round(this.selector().outerWidth()); this.selector().find('.menu').outerWidth(width); this.selector().outerWidth(width); if (this.props.onShow) return this.props.onShow(this.selector()); else return true; }, onHide: () => { this.selector().outerWidth(""); this.selector().find('.menu').outerWidth(""); return true; } });

It can cause a barely noticeable shrinking or enlarging of the drop down when a click is done and also doesn't resize if the page is shrunk or enlarged while the menu is still visible, but it's better than the current state. It would be great if the border width was configurable as a first class citizen in semantic ui.