-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix: Set the non-mobile Toast width to 390px #3589
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice work fixing the global width of the toast messages @rumzledz 🙌
All good with your fix, but now that we've touched these classes, it would be nice to use an already configured spacing class for the before
pseudo-element's width 🥺
Once you push this change, I'll happily re-approve 🦾
@@ -7,7 +7,7 @@ | |||
} | |||
|
|||
.Toastify__toast { | |||
@apply relative mb-0 rounded-l-none rounded-r-lg border border-gray-200 bg-base-white p-6 shadow-lg before:absolute before:left-0 before:top-0 before:block before:h-full before:w-[0.375rem] before:content-[''] sm:min-w-[24.375rem]; | |||
@apply relative mb-0 rounded-l-none rounded-r-lg border border-gray-200 bg-base-white p-6 shadow-lg before:absolute before:left-0 before:top-0 before:block before:h-full before:w-[0.375rem] before:content-[''] sm:w-[24.375rem]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we please change before:w-[0.375rem]
to before:w-1.5
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, your majesty 👑
2c52792
to
99b38ab
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Approving**
Description
A wee update to our Toast component's non-mobile container style. We're now setting it width: 390px to adhere to our Toast's global sizing based on Figma.
Testing
NotificationTypeToggle.tsx
file and add the following param to thetoast.success
function:Resolves #3573