Fix: argType detail popover overflows viewport when content is tall

[Copilot]

When table.type.detail contains many lines, the PopoverProvider popover extends beyond the viewport with no scrollbar — react-aria correctly computes and sets max-height via useOverlayPosition, but overflow was unset (defaulting to visible), so content escaped the element boundary.

Before

After

Changes

• PopoverProvider.tsx — add overflow: 'auto' to PopoverUpstream inline style so constrained height scrolls rather than overflows

- style={{ outline: 'none' }}
+ style={{ outline: 'none', overflow: 'auto' }}

• ArgRow.stories.tsx — add LongDetailPopover story with 55-item icon name list in table.type.detail, mirroring the original reproduction
• manager.spec.ts — E2E test asserting overflowY: auto and scrollHeight > clientHeight on the opened dialog

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/graphql
  • Triggering command: `/usr/bin/gh gh pr create --base next --title Fix: argType detail popover overflows viewport when content is tall --body Closes Addon Test: Clear coverage data when starting or watching storybookjs/storybook#30072

What I did

The PopoverProvider component wraps react-aria's Popover which correctly constrains the popover height via max-height, but without overflow: auto the content would visually overflow outside the element instead of scro ybook/node_modulbranch ybook/node_modul--show-current -786eec917292---%ce---786eec9172security -c (git diff --name-only --no-relatOUTPUT rd /usr/bin/git standard) | git /bin/sh ybook/node_modul-c 1/x64/bin/bash git` (http block)

• Triggering command: /usr/bin/gh gh pr list --head copilot/fix-popover-viewport-overflow --show-toplevel /bin/sh /usr/sbin/bash og -n 1 --formatgit -786eec917292---config /bin/sh bash --no�� --noprofile /bin/sh /usr/bin/git git branch --shogit bash t git (http block)
• Triggering command: `/usr/bin/gh gh pr edit 16 --title Fix: argType detail popover overflows viewport when content is tall --body Closes Addon Test: Clear coverage data when starting or watching storybookjs/storybook#30072

What I did

The PopoverProvider component wraps react-aria's Popover which correctly constrains the popover height via max-height, but without overflow: auto the content would visually overflow outside the element instead of scro ct ## %ae ## %anbash -n /usr/local/bin/g--noprofile /bin/sh -c email git /bin/sh standard) | git git HEAD hrome-linux/head--name-only /bin/sh` (http block)

• https://api.github.com/repos/yannbf/storybook/pulls/16
  • Triggering command: /usr/bin/curl curl -s -X PATCH -H Authorization: token ****** -H Accept: application/vnd.github.v3+json REDACTED -d { "title": "Fix: argType detail popover overflows viewport when content is tall", "body": "Closes #30072\n\n## What I did\n\nThe PopoverProvidercomponent wraps react-aria'sPopoverwhich correctly constrains the popover height viamax-height, b git conf�� r=d --cached;git diff --name-only --no-relative --diff-filter=d;git ls-files --others --exclude-git din rgo/bin/bash --name-only HEAD 1ce9440c /bin/sh (http block)
• main--64b56e737c0aeefed9d5e675.chromatic.com
  • Triggering command: /opt/hostedtoolcache/node/22.21.1/x64/bin/node /opt/hostedtoolcache/node/22.21.1/x64/bin/node core/dist/bin/dispatcher.js dev --port 6006 --config-dir ./.storybook --ci (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DeferRendererTasksAfterInput,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMedi rgo/bin/bash (dns block)
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DeferRendererTasksAfterInput,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMedi /usr/bin/git (dns block)
• octodex.github.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DeferRendererTasksAfterInput,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMedi (dns block)
• s.cdpn.io
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DeferRendererTasksAfterInput,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMedi (dns block)
• storybook.js.org
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1169/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DeferRendererTasksAfterInput,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMedi (dns block)
  • Triggering command: /opt/hostedtoolcache/node/22.21.1/x64/bin/node /opt/hostedtoolcache/node/22.21.1/x64/bin/node --conditions node --conditions development --experimental-import-meta-resolve --require /home/REDACTED/work/storybook/storybook/node_modules/vitest/suppress-warnings.cjs /home/REDACTED/work/storybook/storybook/node_modules/vitest/dist/workers/forks.js (dns block)
  • Triggering command: /opt/hostedtoolcache/node/22.21.1/x64/bin/node /opt/hostedtoolcache/node/22.21.1/x64/bin/node core/dist/bin/dispatcher.js dev --port 6006 --config-dir ./.storybook --ci (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

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>

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

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

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.