msyavuz opened a new pull request, #43555:
URL: https://github.com/apache/superset/pull/43555
### SUMMARY
The chart three-dots menu is invisible and unclickable while a chart is in
native fullscreen — **on production builds only**, which is why it never
reproduced in development.
Native fullscreen paints only the fullscreen element's subtree, so AntD
popups portaled to `document.body` are never drawn and clicks fall through to
the chart. `ChartHolder` compensates with a `getPopupContainer` that re-parents
them into the chart holder, but it located the holder via
`closest('[data-test="dashboard-component-chart-holder"]')`.
`babel-plugin-jsx-remove-data-test-id` strips `data-test` in the `production`
babel env (`babel.config.js:104`), so that returned `null` and fell back to
`document.body`.
The same root cause silently killed the whole `fullscreenStyles` sheet,
which keyed every rule on the same attribute — production fullscreen charts
have had no background, padding, or flex layout either.
- Resolve the popup container from `document.fullscreenElement` instead of a
selector, with a `contains` check so only the chart actually in fullscreen
re-parents its popups.
- Move `fullscreenStyles` onto stable class hooks
(`.dashboard-component-chart-holder`, new `.slice-header`).
- Fix one more dead selector with the same cause: the mobile
title-truncation rule in `DashboardWrapper.tsx`.
Two deliberate removals, since fixing the selectors enables this sheet in
production for the first time:
- `width: 100vw`, `height: 100vh`, `box-sizing`, `position: relative`,
holder `z-index`/`opacity`/`visibility` — the [Fullscreen spec UA
stylesheet](https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults)
sets these with `!important`, and UA `!important` beats author `!important`,
so they cannot apply.
- `:fullscreen * { pointer-events: auto }` — a blanket override that has
never been active in a production build; re-arming pointer events on every
descendant is the riskiest thing to switch on here.
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
N/A — the bug is invisible in a dev build, so a local recording cannot show
the before state. Reproduced and verified against a production build.
### TESTING INSTRUCTIONS
Must be a **production** build; `npm run dev` cannot reproduce this.
1. `cd superset-frontend && npm run build`
2. Serve the built assets and open a dashboard.
3. Chart three-dots menu → **Enter fullscreen**.
4. Click the three-dots menu again.
Before: nothing happens; the menu is in the DOM under `document.body` but
never painted. After: the menu opens anchored to the button, and the chart has
its background and padding.
### ADDITIONAL INFORMATION
- [ ] Has associated issue: No — reported through Preset support.
- [ ] Required feature flags: None.
- [x] Changes UI — chart menu now renders in fullscreen; fullscreen charts
get the background/padding/layout that was always intended.
- [ ] Includes DB Migration: No — frontend only.
- [ ] Introduces new feature or API: No.
- [ ] Removes existing feature or API: No.
Follow-up worth its own PR: five more runtime `[data-test=...]` CSS
selectors are dead in production for the same reason —
`SqlLab/SqlLabGlobalStyles.tsx:51,55`, `ListView.tsx:79,100`, `Modal.tsx:135`.
A rule in `scripts/check-custom-rules.js` banning `[data-test` in `css`
templates and DOM queries would catch the whole class.
https://claude.ai/code/session_01345mdAxbJW9PgEFT9Lvumm
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
