Describe the bug

When you have a responsive b-table with sortable columns, sr-only text is added to show that columns can be clicked to sort or remove sorting. However, these columns can cause empty horizontal overflow.

Steps to reproduce the bug

1. Create a responsive table where the final column is sortable; make sure the screen is narrow enough that there is a horizontal scroll bar on the table.
2. Scroll the page (not the table) horizontally; notice that the page width has increased and scrolls.
3. Inspect the DOM and delete the sr-only span in the final column.
4. The overflow on the page goes away.

Expected behavior

The page should not expand because of the presence of the sr-only span

Versions

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.5.3
• Vue: 2.6.12

Environment:

• Device: Mac, iPhone
• OS: macOs Catalina 10.15.7, iOS 14.3
• Browser: Chrome, Safari, Mobile Safari
• Version: Chrome 87, Safari 14, Mobile Safari 14.

Demo link

https://codepen.io/a_sqaure/pen/zYKeBOL
Make sure page is narrow enough for table to overflow, then scroll horizontally outside the table

Showing the sr-only span in the DOM:

Overflow is removed if the sr-only span is deleted: