fix(toasts): stop the toast overlay from covering controls behind it by jesperct · Pull Request #40805 · apache/superset

jesperct · 2026-06-05T13:59:22Z

SUMMARY

The toast notification container (ToastPresenter) is a position: fixed overlay styled with height: calc(100vh - 100px). That fixed height made it reserve almost the full viewport height even when a single toast was showing, so its empty area sat on top of any controls in the same vertical strip and swallowed their clicks. In practice this blocked the dashboard header's Save / Edit dashboard buttons while a toast was visible, until the toast timed out or was dismissed.

Switching height to max-height lets the overlay shrink to hug its toasts (anchored at the bottom), so it no longer covers controls above it. overflow-y: auto still scrolls the stack when many toasts overflow, and the scrollbar stays fully interactive.

BEFORE/AFTER

The red dashed region marks the toast overlay's actual hit area (the #toast-presenter box) over a mock dashboard header.

Before (height): the overlay spans the full viewport height and covers the Save / Edit buttons, so a click on them lands on the overlay.

After (max-height): the overlay hugs the toast at the bottom, so the buttons are clear and clickable.

TESTING INSTRUCTIONS

Open a dashboard.
Trigger a toast near a corner (for example, save the dashboard, or any action that shows a success/info toast).
While the toast is still visible, click a button in the same vertical strip as the toast container (e.g. Edit dashboard / Save in the header).
- Before this change: the click is swallowed until the toast disappears.
- After this change: the button responds immediately.

Unit test in ToastPresenter.test.tsx asserts the container caps its height with max-height rather than a fixed full height.

ADDITIONAL INFORMATION

Changes UI

bito-code-review · 2026-06-05T13:59:33Z

Code Review Agent Run #9e2f53

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: 2d1fa97..2d1fa97
- superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
- superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

bito-code-review · 2026-06-05T14:05:37Z

The flagged issue is correct. Setting pointer-events: none on the StyledToastPresenter container disables all pointer interactions, including the scrollbar, which prevents users from scrolling through a long list of toasts. To resolve this, you should set pointer-events: auto on the container itself, but ensure the container does not block clicks in its empty space. A common approach is to use a transparent overlay or ensure the container only occupies the space necessary for the toasts, or alternatively, use pointer-events: auto on the container and handle click-through behavior by checking if the click target is the container itself versus a child toast.

superset-frontend/src/components/MessageToasts/ToastPresenter.tsx

height: calc(100vh - 100px);

    /* Allow pointer events on the container to enable scrolling */
    pointer-events: auto;

    display: flex;

codecov · 2026-06-05T14:11:17Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.07%. Comparing base (45a6164) to head (418f736).
⚠️ Report is 27 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #40805   +/-   ##
=======================================
  Coverage   64.07%   64.07%           
=======================================
  Files        2664     2664           
  Lines      143831   143831           
  Branches    33084    33084           
=======================================
  Hits        92160    92160           
  Misses      50062    50062           
  Partials     1609     1609

Flag	Coverage Δ
javascript	`67.63% <ø> (ø)`

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

☔ View full report in Codecov by Harness.
📢 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.

The toast presenter is a fixed overlay with height: calc(100vh - 100px), so it reserved the full viewport height even with a single toast and its empty area sat on top of controls underneath it (e.g. the dashboard Save/Edit buttons), swallowing their clicks until the toasts cleared. Use max-height instead so the overlay hugs its toasts while still scrolling when they overflow.

Copilot

Pull request overview

This PR addresses an interaction issue caused by the toast presenter being a large fixed-position overlay that could block clicks on underlying UI controls (e.g., dashboard header buttons) while toasts are visible.

Changes:

Replace a fixed height on the toast presenter with a max-height cap so the container can shrink-wrap to its toast content while still allowing scrolling when overflowing.
Add a unit test asserting the presenter uses max-height (and does not set the previous fixed height).

Reviewed changes

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

File	Description
superset-frontend/src/components/MessageToasts/ToastPresenter.tsx	Changes presenter sizing from fixed `height` to `max-height` to avoid a full-height fixed overlay blocking interactions.
superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx	Adds a style-rule test to verify the presenter uses `max-height` instead of a fixed `height`.

bito-code-review · 2026-06-05T18:29:19Z

Code Review Agent Run #eee633

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: f975f91..f975f91
- superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
- superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

bito-code-review · 2026-06-05T21:43:21Z

Code Review Agent Run #e7e26e

Actionable Suggestions - 0

Review Details

Files reviewed - 1 · Commit Range: f975f91..418f736
- superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
Files skipped - 0
Tools
- Whispers (Secret Scanner) - ✔︎ Successful
- Detect-secrets (Secret Scanner) - ✔︎ Successful

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

/review - Manually triggers a full AI review.
/pause - Pauses automatic reviews on this pull request.
/resume - Resumes automatic reviews.
/resolve - Marks all Bito-posted review comments as resolved.
/abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

sadpandajoe

LGTM

pull-request-size Bot added the size/S label Jun 5, 2026

dosubot Bot added change:frontend Requires changing the frontend design:accessibility Related to accessibility standards labels Jun 5, 2026

codeant-ai-for-open-source Bot reviewed Jun 5, 2026

View reviewed changes

Comment thread superset-frontend/src/components/MessageToasts/ToastPresenter.tsx Outdated

jesperct force-pushed the fix/toast-notifications-block-dashboard-buttons branch from 2d1fa97 to f975f91 Compare June 5, 2026 15:27

sadpandajoe requested review from Copilot and sadpandajoe June 5, 2026 17:29

Copilot started reviewing on behalf of sadpandajoe June 5, 2026 17:29 View session

sadpandajoe added the review:checkpoint Last PR reviewed during the daily review standup label Jun 5, 2026

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Comment thread superset-frontend/src/components/MessageToasts/ToastPresenter.tsx

Comment thread superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx

jesperct changed the title ~~fix(toasts): let clicks pass through the toast container's empty area~~ fix(toasts): stop the toast overlay from covering controls behind it Jun 5, 2026

test(toasts): assert presenter is present before checking its styles

418f736

sadpandajoe approved these changes Jun 6, 2026

View reviewed changes

sadpandajoe added the merge-if-green If approved and tests are green, please go ahead and merge it for me label Jun 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(toasts): stop the toast overlay from covering controls behind it#40805

fix(toasts): stop the toast overlay from covering controls behind it#40805
jesperct wants to merge 2 commits into
apache:masterfrom
jesperct:fix/toast-notifications-block-dashboard-buttons

jesperct commented Jun 5, 2026 •

edited

Loading

Uh oh!

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

Code Review Agent Run #9e2f53

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

codecov Bot commented Jun 5, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

Code Review Agent Run #eee633

Uh oh!

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

Code Review Agent Run #e7e26e

Uh oh!

sadpandajoe left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

jesperct commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

bito-code-review Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #9e2f53

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 5, 2026

Uh oh!

codecov Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

bito-code-review Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #eee633

Uh oh!

bito-code-review Bot commented Jun 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #e7e26e

Uh oh!

sadpandajoe left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jesperct commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

codecov Bot commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading

bito-code-review Bot commented Jun 5, 2026 •

edited

Loading