Detail Bug Report

https://app.detail.dev/org_3377c26d-da48-4ccd-b83a-22c542f4fe83/bugs/bug_bbcf723b-abaa-4ad6-bd6d-14c601305cf6

Introduced in #34977 by @shah-harshit on Oct 9, 2026

Summary

• Context: The table profiler "Settings" drawer (ProfilerSettingsModal) lets users pick include columns and per-column metrics via antd Select / TreeSelect pickers rendered inside a SlideoutMenu (react-aria dialog).
• Bug: A recently merged commit (7f3407765e, "Keep profiler dropdowns inside the settings drawer") makes every dropdown mount into triggerNode.parentElement, which places the include-column picker and metrics TreeSelect popups inside the 160px h-max-40 overflow-y-auto scroll wrapper that is active whenever there are 2+ include-column rows — so the popups are visually clipped to that tiny box and scroll with it.
• Actual vs. expected: The open column/metrics dropdowns are cut off at the 160px-high wrapper's bounds (users must scroll inside the tiny nested box to reach options); previously they rendered into document.body and were never clipped.
• Impact: For any table with 2+ include-column rules (or simply after one click of the "+" button), the metrics TreeSelect (~20 entries under "All") and column picker suffer a severe UX degradation: options are clipped to the tiny box and are only reachable by scrolling inside it.

Code with Bug

// Legacy dropdowns must stay inside the modal's focus and accessibility boundary.
const getPopupContainer = (triggerNode: HTMLElement) =>
  triggerNode.parentElement ?? document.body;

<div
  className={classNames({
    'h-max-40 overflow-y-auto': state?.includeCol.length > 1,  // <-- BUG 🔴 160px clip box, active with 2+ rows
  })}
  data-testid="include-column-container">
  {fields.map(({ key, name, ...restField }) => (
    <Grid ...>
      <Grid.Item className="layout-column" span={12}>
        <Form.Item ... name={[name, 'columnName']}>
          <Select
            ...
            getPopupContainer={getPopupContainer}  // <-- BUG 🔴 popups mount inside the clip box above
          />
        </Form.Item>
      </Grid.Item>
      <Grid.Item className="layout-column flex" span={12}>
        <Form.Item ... name={[name, 'metrics']}>
          <TreeSelect
            treeCheckable
            ...
            getPopupContainer={getPopupContainer}  // <-- BUG 🔴 same
          />
        </Form.Item>

Explanation

• The include-column rows are wrapped in a conditional max-height: 160px + overflow-y: auto container once there are 2+ include-column entries.
• After commit 7f3407765e, getPopupContainer forces antd/rc-trigger popups to mount under triggerNode.parentElement. For the include-column Select and metrics TreeSelect, that parent chain is inside the overflow wrapper.
• Because the popup is positioned absolutely as a descendant of the overflow container, it is clipped by the wrapper’s overflow bounds, making dropdown options inaccessible without scrolling within the small nested area.

Codebase Inconsistency

• Before 7f3407765e, ProfilerSettingsModal.tsx did not set getPopupContainer, so antd’s default behavior mounted popups into document.body, and the same h-max-40 overflow-y-auto wrapper could not clip them.

Recommended Fix

For these two popups only (the include-column Select and the metrics TreeSelect), keep the popup inside the SlideoutMenu dialog but outside the scroll container by using a container above [data-testid="include-column-container"], e.g.:

// Pass a dedicated getPopupContainer for the pickers inside the include-rows wrapper:
const getPopupContainerOutsideRows = (triggerNode: HTMLElement) =>
  triggerNode.closest('[data-testid="profiler-settings-modal"]') ?? document.body;  // <-- FIX 🟢 stays inside the dialog, above the h-max-40 clip box

History

This bug was introduced in commit 7f34077. The commit ("Fixes #34976: Align dark-theme surfaces and controls across shared UI", PR #34977) was a broad dark-theme polish pass with a sub-change titled "Keep profiler dropdowns inside the settings drawer", whose intent was to keep antd popup portals inside the react-aria dialog's focus/accessibility boundary; to do so it added a module-level getPopupContainer helper returning triggerNode.parentElement and attached it to all 7 Select/TreeSelect instances in ProfilerSettingsModal.tsx. That included the two pickers nested inside the pre-existing h-max-40 overflow-y-auto include-column wrapper, which could not clip popups before (popups mounted to document.body by antd's default) — so the refactor introduced the clipping regression. git log -S 'getPopupContainer' on the file shows this commit is the sole commit that ever introduced/modified that symbol, confirming it as the origin rather than a refactor of existing buggy logic.