codeant-ai-for-open-source[bot] commented on code in PR #37709:
URL: https://github.com/apache/superset/pull/37709#discussion_r2770101965
##########
superset-frontend/src/components/MessageToasts/ToastPresenter.tsx:
##########
@@ -33,17 +33,60 @@ 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: transparent transparent;
+
+ &:hover {
+ scrollbar-color: rgba(255, 255, 255, 0.4) transparent;
+ }
+
+ /* Chromium / WebKit */
+ &::-webkit-scrollbar {
+ width: 6px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: rgba(255, 255, 255, 0.25);
+ border-radius: 6px;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+ }
+
+ &:hover::-webkit-scrollbar-thumb {
+ opacity: 1;
+ }
+
+ &:active::-webkit-scrollbar-thumb {
+ opacity: 1;
+ }
+
.toast {
padding: ${theme.sizeUnit * 4}px;
margin: ${theme.sizeUnit * 4}px;
background: ${theme.colorBgSpotlight};
border-radius: ${theme.borderRadius}px;
box-shadow: ${theme.boxShadow};
color: ${theme.colorTextLightSolid};
+ display: flex;
+ align-items: flex-start;
+ max-height: 70vh;
opacity: 0;
Review Comment:
**Suggestion:** The toast container enforces a max-height but does not set
an overflow behavior, so when an error message is taller than 70vh its content
will spill out visually beyond the toast card instead of becoming scrollable,
which breaks the layout and defeats the purpose of constraining long messages.
Adding a vertical overflow rule on the toast itself ensures long messages
scroll inside the card instead of overflowing. [logic error]
<details>
<summary><b>Severity Level:</b> Major ⚠️</summary>
```mdx
- ❌ Long database error toasts unreadable in UI.
- ⚠️ Users can't easily copy full error messages.
- ⚠️ Debugging migration failures becomes harder.
- ⚠️ Toast layout visually breaks near presenter edges.
```
</details>
```suggestion
overflow-y: auto;
```
<details>
<summary><b>Steps of Reproduction ✅ </b></summary>
```mdx
1. Build or run the frontend containing ToastPresenter component (file:
superset-frontend/src/components/MessageToasts/ToastPresenter.tsx).
2. Create or simulate a toast with a very long message body (for example
>5000 characters)
so the rendered toast would exceed the viewport height. The visual rules for
the toast
card are defined in the StyledToastPresenter's .toast CSS block at
ToastPresenter.tsx
lines 80-106 (see the `.toast { ... max-height: 70vh; ... }` rule).
3. Render that toast by supplying a toasts array to the ToastPresenter
component (the
component maps toasts to <Toast /> instances in this same file). Observe the
DOM node
matching the `.toast` selector (defined at ToastPresenter.tsx:80) — because
`.toast` has
`max-height: 70vh` but no `overflow-y`, content taller than 70vh will
visually overflow
outside the card instead of becoming scrollable inside it.
4. Verify the symptom in browser: open DevTools → Elements, inspect the
`.toast` element
(superset-frontend/src/components/MessageToasts/ToastPresenter.tsx lines
80-106). You will
see text content extending past the card boundary and the presenter layout,
making
selection/copy and reading awkward. Adding `overflow-y: auto;` to the
`.toast` block fixes
this by enabling an internal scrollbar for long messages.
```
</details>
<details>
<summary><b>Prompt for AI Agent 🤖 </b></summary>
```mdx
This is a comment left during a code review.
**Path:** superset-frontend/src/components/MessageToasts/ToastPresenter.tsx
**Line:** 90:90
**Comment:**
*Logic Error: The toast container enforces a max-height but does not
set an overflow behavior, so when an error message is taller than 70vh its
content will spill out visually beyond the toast card instead of becoming
scrollable, which breaks the layout and defeats the purpose of constraining
long messages. Adding a vertical overflow rule on the toast itself ensures long
messages scroll inside the card instead of overflowing.
Validate the correctness of the flagged issue. If correct, How can I resolve
this? If you propose a fix, implement it and please make it concise.
```
</details>
--
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]
