[Tabs] Content wraps when tabs are non-integer widths

[lhoffbeck]

Issue summary

The Tabs component doesn't take non-integer tab widths into consideration, resulting in cases where the "disclosure tab" may be wrapped to the next line while resizing. Among others, this can be seen on the Polaris tabs demo page, the Tabs sandbox demo page in storybook, and the /admin/products page.

The tabs are wrapped in a display: flex, however it's also got a flex-wrap: wrap due to an iOS issue.

Expected behavior

The "more tabs" handle shouldn't be bumped to the next line.

Actual behavior

When resizing, for several 1px-browser-width-changes the "more tabs" handle is bumped to the next line.

Steps to reproduce the problem

1. Using the codesandbox link from the polaris tabs example, resize the browser window until the tabs overflow to a second line.

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: v6.0.0
• Browser: all
• Device: 16" mbp
• Operating System: macOS v10.15.7