Fix: argType detail popover overflows viewport when content is tall

[Copilot]

When table.type.detail (or table.defaultValue.detail) contains tall content, the argType detail popover escapes the viewport with no way to scroll it.

Root cause: react-aria sets maxHeight on .react-aria-Popover inline (capped to viewport height), but without overflow: auto the content bleeds past that boundary.

Fix

• code/core/src/theming/global.ts: add overflow: auto to .react-aria-Popover — one CSS rule, globally applied to all react-aria popovers in the Manager.

Before / After

Before	After

This is the same fix as the workaround in the issue (.react-aria-Popover[data-trigger='DialogTrigger'][role='dialog'] { overflow: auto }) but applied at the correct level without the overly-specific selector.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: argType detail popover overflows viewport when content is tall</issue_title>
<issue_description>### Describe the bug

When putting much content in table.detail of an argType the popover might be taller than the available viewport height without any means to scroll it’s content:

Reproduction link

https://stackblitz.com/edit/github-hr4h8v8k?file=src%2Fstories%2FButton.stories.ts

Reproduction steps

Check the story of Button in the reproduction and open the details on the control for icon

Or for reproducing in your project:

1. Set expanded: true to preview.controls in your .storybook/preview.ts file
2. Put the following argType in you story:

const meta = {
  argTypes: {
    icon: {
      control: 'text',
      table: {
        type: {
          summary: 'IconName',
          detail: [
            "'filter'",
            "'search'",
            "'close'",
            "'info'",
            "'alertCircle'",
            "'alertTriangle'",
            "'archive'",
            "'arrowLeftToLine'",
            "'arrowRightToLine'",
            "'attachment'",
            "'back'",
            "'bookmark'",
            "'bulletPoint'",
            "'calendar'",
            "'call'",
            "'cart'",
            "'chat'",
            "'check'",
            "'checkDocument'",
            "'chevronDown'",
            "'chevronLeft'",
            "'chevronRight'",
            "'chevronUp'",
            "'contextMenu'",
            "'dashboard'",
            "'download'",
            "'draggable'",
            "'duplicate'",
            "'edit'",
            "'expand'",
            "'eye'",
            "'file'",
            "'fullscreen'",
            "'globe'",
            "'home'",
            "'infoCircle'",
            "'list'",
            "'locationPin'",
            "'lock'",
            "'logout'",
            "'mail'",
            "'menu'",
            "'minus'",
            "'plus'",
            "'print'",
            "'save'",
            "'settings'",
            "'star'",
            "'trash'",
            "'upload'",
            "'user'",
            "'zoomIn'",
            "'zoomOut'",
          ].join('\n| '),
        },
      },
    },
  },
} 

System

│
│  
│  Storybook Environment Info:
│

│  System:
│  OS: Linux 6.18 Fedora Linux 43.20260226.0 (Silverblue)
│  CPU: (16) x64 AMD Ryzen 7 9800X3D 8-Core Processor
│  Shell: 5.9 - /usr/bin/zsh
│  Binaries:
│  Node: 24.13.0 - /var/home/thomasaull/.nvm/versions/node/v24.13.0/bin/node
│  Yarn: 1.22.19 - /var/home/thomasaull/.nvm/versions/node/v22.16.0/bin/yarn
│  npm: 11.6.2 - /var/home/thomasaull/.nvm/versions/node/v24.13.0/bin/npm
│  pnpm: 10.28.2 - /var/home/thomasaull/.nvm/versions/node/v22.16.0/bin/pnpm <-----
│  active
│  npmPackages:
│  @storybook/addon-docs: catalog: => 10.2.6
│  @storybook/addon-vitest: catalog: => 10.2.6
│  @storybook/icons: 2.0.1 => 2.0.1
│  @storybook/vue3-vite: catalog: => 10.2.6
│  storybook: catalog: => 10.2.6
│  storybook-addon-tag-badges: 3.0.2 => 3.0.2

Additional context

A quick workaround is to add the following styles to preview-head.html and manager-head.html, since the popover of react-aria already sets an appropriate max-height:

<style>
  .react-aria-Popover[data-trigger='DialogTrigger'][role='dialog'] {
    overflow: auto;
  }
</style>

Also this might be a related issue at radix-ui: radix-ui/primitives#3492</issue_description>

<agent_instructions>Use the fix-bug skill to fix the issue. Make sure to verify the bugfix by appending proof to the PR in the form of screenshots or other visual evidence)</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes [Bug]: argType detail popover overflows viewport when content is tall #33952

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.