<b-table> sorting arrows overlap <th> text

[shaneparsons]

Describe the bug

The sorting arrows of b-table overlap the th text under certain circumstances.

Steps to reproduce the bug

1. Go to this codepen
2. Shrink the width of your browser window... at a certain point you will see the overlap

Expected behavior

The arrow to always remain to the right of the th text.

Versions

Libraries:

• BootstrapVue: 2.0.0-rc.26

Environment:

• Browser: all modern browsers.

Additional context

If you un-comment the css in the codepen file you'll see my "temporary" fix for the issue... I'm sure somebody else can come up with a cleaner solution though.

[shaneparsons]

It may also be useful to note that this only seems to happen when the width of the <th> is wider than that of the <td>

[tmorehouse]

Adding position relative to the table headers will make it so that dropdowns and tooltips in table headers don't position correctly (which is why we moved to float: right instead of absolute positioning of the sort arrows.

[tmorehouse]

Maybe when sorting, we might need to add additional padding to the table data cells.

[tmorehouse]

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog