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( ${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( 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( } .toast > button { - color: ${theme.colorTextLightSolid}; + color: ${theme.colorText}; opacity: 1; }