fix(s2): tab takes up entire popover width in collapsed tabs (#8441)

* fix(s2): tab takes up entire popover width in collasped tabs

* add chromatic story with collapse behavior

Author: yihuiliao

packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx

@@ -17,6 +17,7 @@ import type {Meta} from '@storybook/react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
 import {Text} from '@react-spectrum/s2';
+import {userEvent} from '@storybook/test';
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
@@ -97,3 +98,28 @@ export const Icons = {
     </Tabs>
   )
 };
+
+export const Collasped = {
+  render: (args: any) => (
+    <Tabs {...args} aria-label="Settings" styles={style({width: 200, height: 144})}>
+      <TabList>
+        <Tab id="Mouse">Mouse settings</Tab>
+        <Tab id="Keyboard">Keyboard settings</Tab>
+        <Tab id="Gamepad">Gamepad settings</Tab>
+      </TabList>
+      <TabPanel id="Mouse">
+        Adjust the sensitivity and speed of your mouse
+      </TabPanel>
+      <TabPanel id="Keyboard">
+        Customize the layout and function of your keyboard.
+      </TabPanel>
+      <TabPanel id="Gamepad">
+        Configure the buttons and triggers on your gamepad.
+      </TabPanel>
+    </Tabs>
+  ),
+  play: async () => {
+    await userEvent.tab();
+    await userEvent.keyboard('{Enter}');
+  }
+};

packages/@react-spectrum/s2/src/TabsPicker.tsx

@@ -127,6 +127,7 @@ export let menu = style({
   display: 'grid',
   gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
   boxSizing: 'border-box',
+  width: 'full',
   maxHeight: 'inherit',
   overflow: 'auto',
   padding: 8,