fix(lemon-ui): fix lemon toast overflow #19391
Conversation
|
Size Change: +9.3 kB (0%) Total Size: 2 MB
|
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated1 snapshot changes in total. 0 added, 1 modified, 0 deleted:
Triggered by this commit. |
📸 UI snapshots have been updated3 snapshot changes in total. 0 added, 3 modified, 0 deleted:
Triggered by this commit. |
| @@ -44,7 +44,7 @@ export interface ToastContentProps { | |||
| export function ToastContent({ type, message, button, id }: ToastContentProps): JSX.Element { | |||
| return ( | |||
| <div className="flex items-center" data-attr={`${type}-toast`}> | |||
| <span className="grow">{message}</span> | |||
| <span className="grow overflow-hidden text-ellipsis">{message}</span> | |||
There was a problem hiding this comment.
text-ellipsis won't do anything without whitespace-nowrap right? (the truncate util contains all this but not sure if we actually want this as then it would only be one line...
There was a problem hiding this comment.
Hmm it adds the "..." at the end of the text.
With:
Without:
We do want more than one line :)
Problem
One of our most common error toasts has an overflow issue:
Changes
This PR fixes the issue and adds the toast to Storybook. I couldn't convince Storybook to capture them correctly though...
How did you test this code?
👀