UI: Fix excessive height in TabbedArgsTable

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx

@@ -1,11 +1,20 @@
+import { TabsView } from 'storybook/internal/components';
+
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ArgsTable } from './ArgsTable';
 import { Compact, Normal, Sections } from './ArgsTable.stories';
 import { TabbedArgsTable } from './TabbedArgsTable';
 
-export default {
+const meta = {
   component: TabbedArgsTable,
-};
+  tags: ['autodocs'],
+  subcomponents: { TabbedArgsTable: TabbedArgsTable, ArgsTable, TabsView },
+} satisfies Meta<typeof TabbedArgsTable>;
+
+export default meta;
 
-export const Tabs = {
+export const Tabs: StoryObj<typeof meta> = {
   args: {
     tabs: {
       Normal: Normal.args,
@@ -15,7 +24,7 @@ export const Tabs = {
   },
 };
 
-export const TabsInAddonPanel = {
+export const TabsInAddonPanel: StoryObj<typeof meta> = {
   args: {
     tabs: {
       Normal: Normal.args,
@@ -26,8 +35,25 @@ export const TabsInAddonPanel = {
   },
 };
 
-export const Empty = {
+export const Empty: StoryObj<typeof meta> = {
   args: {
     tabs: {},
   },
 };
+
+export const WithContentAround: StoryObj<typeof meta> = {
+  args: {
+    tabs: {
+      Normal: Normal.args,
+      Compact: Compact.args,
+      Sections: Sections.args,
+    },
+  },
+  render: (args) => (
+    <>
+      <p>This is some content above the TabbedArgsTable.</p>
+      <TabbedArgsTable {...args} />
+      <p>This is some content below the TabbedArgsTable.</p>
+    </>
+  ),
+};

code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 
 import { TabsView } from 'storybook/internal/components';
 
+import { styled } from 'storybook/theming';
+
 import type { ArgsTableProps } from './ArgsTable';
 import { ArgsTable } from './ArgsTable';
 
@@ -12,6 +14,10 @@ export type TabbedArgsTableProps = DistributiveOmit<ArgsTableProps, 'rows'> & {
   tabs: Record<string, ArgsTableProps>;
 };
 
+const StyledTabsView = styled(TabsView)({
+  height: 'fit-content',
+});
+
 export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) => {
   const entries = Object.entries(tabs);
 
@@ -34,5 +40,5 @@ export const TabbedArgsTable: FC<TabbedArgsTableProps> = ({ tabs, ...props }) =>
     },
   }));
 
-  return <TabsView tabs={tabsFromEntries} />;
+  return <StyledTabsView tabs={tabsFromEntries} />;
 };