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

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 5da63d716be fix(toasts): stop the toast overlay from covering controls behind it (#40805)
5da63d716be is described below

commit 5da63d716bef071a2a71e45fae0d134af0b513af
Author: jesperct <jm...@gmail.com>
AuthorDate: Sun Jun 7 08:10:43 2026 -0300

    fix(toasts): stop the toast overlay from covering controls behind it (#40805)
    
    Co-authored-by: Đỗ Trọng Hải <41...@users.noreply.github.com>
---
 .../src/components/MessageToasts/ToastPresenter.test.tsx       | 10 ++++++++++
 .../src/components/MessageToasts/ToastPresenter.tsx            |  4 +++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx b/superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
index 1a3e4894816..f933b0ec1e5 100644
--- a/superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
+++ b/superset-frontend/src/components/MessageToasts/ToastPresenter.test.tsx
@@ -47,3 +47,13 @@ test('should pass removeToast to the Toast component', async () => {
   fireEvent.click(getAllByTestId('close-button')[0]);
   await waitFor(() => expect(removeToast).toHaveBeenCalledTimes(1));
 });
+
+test('presenter caps its height with max-height so it hugs the toasts', () => {
+  // A fixed `height` would make the fixed overlay span the viewport and block
+  // controls underneath it; `max-height` lets it shrink to the toasts while
+  // still scrolling when they overflow.
+  const presenter = setup().container.querySelector('#toast-presenter');
+  expect(presenter).toBeInTheDocument();
+  expect(presenter).toHaveStyleRule('max-height', 'calc(100vh - 100px)');
+  expect(presenter).not.toHaveStyleRule('height', 'calc(100vh - 100px)');
+});
diff --git a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
index de90f4a8f31..ab582e22556 100644
--- a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
+++ b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
@@ -37,7 +37,9 @@ const StyledToastPresenter = styled.div<VisualProps>(
     z-index: ${theme.zIndexPopupBase + 1};
     word-break: break-word;
 
-    height: calc(100vh - 100px);
+    /* Cap height for scrolling, but hug the toasts so the fixed overlay does not
+       reserve the full viewport and block controls underneath it. */
+    max-height: calc(100vh - 100px);
 
     display: flex;
     flex-direction: ${position === 'bottom' ? 'column-reverse' : 'column'};