Latest version

• I have tested the latest version

Description

TabsNext exceeds available space, especially after selecting an item from the overflow menu. It also appears that at least 2 tabs will be visible when selecting from the overflow menu, works fine when selecting between visible tabs.

Split from #4617

Community report from SO#97197 SO#97131

Steps to reproduce

https://stackblitz.com/edit/vitejs-vite-nmkvothf?file=src%2FApp.tsx

      <div style={{ maxWidth: 200, background: 'yellow' }}>
        <TabsNext defaultValue={tabs[0]}>
          <TabBar inset divider>
            <TabListNext style={{ margin: 'auto' }}>
              {tabs.map((label) => (
                <TabNext value={label} key={label}>
                  <TabNextTrigger>{label}</TabNextTrigger>
                </TabNext>
              ))}
            </TabListNext>
          </TabBar>
        </TabsNext>
      </div>

Expected behavior

Tabs shouldn't exceed given space, when selecting from overflow menu

Package name(s)

Lab (@salt-ds/lab)

Package version(s)

@salt-ds/[email protected]

Browser

• Chrome
• Safari
• Firefox
• Microsoft Edge

Operating system

• macOS
• Windows
• Linux
• iOS
• Android

Are you a JPMorgan Chase & Co. employee?

• I am an employee of JPMorgan Chase & Co.