(superset) branch master updated: fix(db): prevent long database error messages from overflowing UI (#37709)

[hainenber]

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

hainenber 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 f4708a56484 fix(db): prevent long database error messages from 
overflowing UI (#37709)
f4708a56484 is described below

commit f4708a564840b77d5cec63b15cef841949c52dc3
Author: Rini Misini <rini.mis...@starlabspro.com>
AuthorDate: Sat Feb 7 15:13:09 2026 +0100

    fix(db): prevent long database error messages from overflowing UI (#37709)
    
    Co-authored-by: RiniMisini12 <misinir...@gmail.com>
---
 .../src/components/MessageToasts/Toast.tsx         | 18 +++++--
 .../components/MessageToasts/ToastPresenter.tsx    | 59 +++++++++++++++++++++-
 2 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/components/MessageToasts/Toast.tsx 
b/superset-frontend/src/components/MessageToasts/Toast.tsx
index 6370b7002af..82921b10094 100644
--- a/superset-frontend/src/components/MessageToasts/Toast.tsx
+++ b/superset-frontend/src/components/MessageToasts/Toast.tsx
@@ -26,14 +26,24 @@ import { ToastType, ToastMeta } from './types';
 const ToastContainer = styled.div`
   ${({ theme }) => css`
     display: flex;
-    justify-content: space-between; // Changed from center to space-between
-    align-items: center;
+    align-items: flex-start;
+    gap: ${theme.sizeUnit * 2}px;
 
     // Content container for icon and text
     .toast__content {
       display: flex;
-      align-items: center;
-      flex: 1; // Take available space
+      align-items: flex-start;
+      gap: ${theme.sizeUnit * 2}px;
+
+      flex: 1;
+
+      max-height: 60vh;
+      overflow-y: auto;
+
+      padding-right: ${theme.sizeUnit * 2}px;
+
+      scrollbar-width: thin;
+      scrollbar-color: ${theme.colorTextLightSolid} ${theme.colorBgSpotlight};
     }
 
     .anticon {
diff --git a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx 
b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
index 3fba4dcb5bc..ca6d694c1db 100644
--- a/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
+++ b/superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
@@ -33,10 +33,62 @@ const StyledToastPresenter = styled.div<VisualProps>(
     ${position === 'bottom' ? 'bottom' : 'top'}: 0px;
     right: 0px;
     margin-right: 50px;
-    margin-bottom: 50px;
+    margin-block: 50px;
     z-index: ${theme.zIndexPopupBase + 1};
     word-break: break-word;
 
+    height: calc(100vh - 100px);
+
+    display: flex;
+    flex-direction: ${position === 'bottom' ? 'column-reverse' : 'column'};
+    align-items: stretch;
+    gap: ${theme.sizeUnit * 2}px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+
+    scrollbar-color:
+      color-mix(in srgb, ${theme.colorText}, transparent 75%)
+      transparent;
+
+    &:hover,
+    &:focus-within,
+    &:active {
+      scrollbar-color:
+        color-mix(in srgb, ${theme.colorText}, transparent 60%)
+        transparent;
+    }
+
+    /* Chromium / WebKit */
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in srgb,
+        ${theme.colorText},
+        transparent 75%
+      );
+      border-radius: 6px;
+      transition: background-color 0.2s ease;
+    }
+
+    &:hover::-webkit-scrollbar-thumb,
+    &:focus-within::-webkit-scrollbar-thumb,
+    &:active::-webkit-scrollbar-thumb {
+      background-color: color-mix(
+        in srgb,
+        ${theme.colorText},
+        transparent 60%
+      );
+    }
+
     .toast {
       padding: ${theme.sizeUnit * 4}px;
       margin: ${theme.sizeUnit * 4}px;
@@ -44,6 +96,9 @@ const StyledToastPresenter = styled.div<VisualProps>(
       border-radius: ${theme.borderRadius}px;
       box-shadow: ${theme.boxShadow};
       color: ${theme.colorTextLightSolid};
+      display: flex;
+      align-items: flex-start;
+      max-height: 70vh;
       opacity: 0;
       position: relative;
       transform: translateY(-100%);
@@ -63,7 +118,7 @@ const StyledToastPresenter = styled.div<VisualProps>(
     }
 
     .toast > button {
-      color: ${theme.colorTextLightSolid};
+      color: ${theme.colorText};
       opacity: 1;
     }