Issue summary

When using the Tabs component with a) more tabs than fit in the width of the layout and b) badged content, tabs wrap to a second spaced-out line before the More views disclosure.

Expected behavior

Tabs should fit on a single line with More views hiding the rest

Actual behavior

This issue does not reproduce using LegacyTabs (with badges included in the content ReactNode itself):

nor with new Tabs without any badges:

but with TabProps.badge added, the wrapping behaviour is seen consistently on a variety of screen sizes

Steps to reproduce the problem

Use Tabs within a Card or LegacyCard with 10+ tabs with badge set and a variety of long content titles.

Reduced test case

Reproduced in code sandbox here: https://codesandbox.io/p/sandbox/flamboyant-paper-9ltffg

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 12.10.0
• Browser: Google Chrome 119.0.6045.105
• Device: MacBook Pro
• Operating System: macOS Sonoma 14.1.1

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

  System:
    OS: macOS 14.1.1
    CPU: (12) arm64 Apple M2 Max
    Memory: 102.92 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.4.0 - ~/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.7.2 - /opt/homebrew/bin/npm
    Watchman: 2023.07.10.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 119.0.6045.123
    Safari: 17.1
  npmPackages:
    @shopify/polaris: 12.10.0 => 12.10.0
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0