Tabs: Text content for TabList items do not wrap and end up spilling over TabPanels area

[aybarra]

🐛 Bug Report

When using an item in a TabList in conjunction with TabPanels wrapped by an outer Tabs component, if the label is really long there is no ... truncation nor is there any wrapping of the text element.

🤔 Expected Behavior

The label content should either wrap or at worst case truncate

😯 Current Behavior

The label content spills over onto the TabPanels portion

💁 Possible Solution

Not sure if there's a way to enforce all children of an Item to inherit the same maxWidth? Or for Text elements that are children of an Item maybe we can apply overflow wrap styling?

🔦 Context

For a widget I'm writing up I know we accommodate existing products where we populate the name + other distinguishing features (ie: storage, fern names etc...) that could potentially make the label longer than a traditional product name. I want to maintain the fixed max width for the TabList to maximize the content area for the TabPanels but still have the tab labels presented normally.

💻 Code Sample

<Tabs
      aria-label="editable products"
      defaultSelectedKey={selectedProductEditId}
      orientation="vertical"
    >
      <TabList marginTop="size-150" maxWidth="15%">
        {tabs.map((tab) => (
          <Item key={tab.id}>
            <Text>{tab.label}</Text>
          </Item>
        ))}
      </TabList>
      <Divider orientation="vertical" size="S" />
      <TabPanels marginStart="size-250">
        {products.map((product) => (
          <Item key={product.editId}>
            <ProductForm isDisabled={false} product={product} />
          </Item>
        ))}
      </TabPanels>
    </Tabs>

🌍 Your Environment

Software	Version(s)
react-spectrum	3.14.0
Browser	Chrome 95.0.4638.69
Operating System	Mac Catalina 10.15.7

🧢 Your Company/Team

Admin Console/AAUI

🕷 Tracking Issue (optional)

n/a