fix: prevent axis attribute menu from appearing offscreen [CODAP-1048]

[kswenson]

[CODAP-1048] Impossible to choose attribute from a graph axis menu when list is very long
[CODAP-503] Graph Attribute Menu clipped by window problem

Summary

• Wrap MenuList in a Chakra UI Portal so it renders at the .codap-container level, allowing Popper to properly calculate viewport boundaries for positioning
• Add placement="auto" to let Popper choose the optimal menu position based on available space
• Remove the spacer MenuItem hack that was previously needed to prevent the bottom item from disappearing (no longer necessary with Portal-based rendering)
• Portal the menu into .codap-container instead of body to prevent it from appearing on top of the tool shelf and CFM menus
• Add z-index styling to ensure the menu appears above tiles within the container
• Make the menu scrollable with a max height of min(50vh, 400px) to handle long attribute lists

Test plan

• Open a graph with attributes on X and Y axes
• Position the graph near the bottom of the browser window and click on the X axis attribute - menu should appear above the axis if there is not enough room below
• Position the graph near the bottom of the browser window and click on the Y axis attribute - menu should flip to appear in a visible location
• Verify the bottom menu item (Treat as Categorical/Numeric) is visible and not cut off in both cases
• Test with graphs in various positions to ensure menus always appear within the visible viewport
• Verify the menu does not appear on top of the tool shelf or CFM menu bars
• Test with a dataset containing many attributes to verify the menu is scrollable

🤖 Generated with Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.71%. Comparing base (98bcf2b) to head (7bfa795).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2300      +/-   ##
==========================================
+ Coverage   86.69%   86.71%   +0.02%     
==========================================
  Files         724      724              
  Lines       38770    38771       +1     
  Branches     9588     9596       +8     
==========================================
+ Hits        33610    33620      +10     
+ Misses       5151     4847     -304     
- Partials        9      304     +295     

Flag	Coverage Δ
cypress	71.85% <100.00%> (+0.07%)	⬆️
jest	55.74% <15.38%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[cypress]

codap-v3    Run #9677

Run Properties:   Passed #9677  •  48d43bc376: Increment the build number

Project	codap-v3
Branch Review	main
Run status	Passed #9677
Run duration	02m 08s
Commit	48d43bc376: Increment the build number
Committer	eireland
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
View all changes introduced in this branch ↗︎

[Copilot]

Pull request overview

This PR fixes a longstanding issue where graph axis attribute menus would appear offscreen when the graph was positioned near the bottom of the browser window or when attribute lists were very long.

Changes:

• Wraps the MenuList component in a Chakra UI Portal to render it at document body level
• Changes Menu positioning from boundary="scrollParent" to placement="auto" for automatic optimal positioning
• Removes the spacer MenuItem hack that was previously needed to prevent bottom items from being cut off

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
v3/src/components/axis/components/axis-or-legend-attribute-menu.tsx	Wraps MenuList in Portal and updates Menu props for proper viewport-aware positioning
v3/cypress/support/elements/axis-elements.ts	Updates test selector to find menu items at body level instead of within graph tile

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[bfinzer]

👍🏻LGTM
Nice use of portal and bringing about scrolling!