Bug: UI/UX: Refine styling of Toasts

[ryandotfurrer]

The toasts currently take up nearly the entire width of the screen which is just unnecessary. I'd like to add a max-width: content-fit (tailwind class max-w-fit) and increase the font-size so it is easier to see.

I'd also like to check that the contrast of the font on against the background meets WCAG standards.

See the full-width toast at the top of the screen in the screenshot below:

[kepsteen]

@ryandotfurrer Another option would be to set the max-width of the toast at different breakpoints so that on mobile, they're full-width and have a max-width of 300ish pixels on larger screens, for example. With this approach the toast's width would be consistent.

Also, would you like the toasts to be in the top center or in another location?

[ryandotfurrer]

@ryandotfurrer Another option would be to set the max-width of the toast at different breakpoints so that on mobile, they're full-width and have a max-width of 300ish pixels on larger screens, for example. With this approach the toast's width would be consistent.

Also, would you like the toasts to be in the top center or in another location?

Full-width makes sense for mobile. At that rate w-full should be the default and I'd imagine we'd want to change it at the large breakpoint; so lg:max-width....

However, don't set a max-width with pixels, use a relative unit like REM instead; that way it will resize appropriately if the user has the browser zoomed in/out.

I think the toasts need to be dismissible as well.

As for the placement, I'd wager being offset is ideal on larger screens. I think good options are top-right or bottom-right. If bottom-right, above the feedback link.

What are your thoughts?

[kepsteen]

As for the placement, I'd wager being offset is ideal on larger screens. I think good options are top-right or bottom-right. If bottom-right, above the feedback link.

Between those two I think maybe above the feedback button would be better so that the toasts don't block the hamburger menu.

I think the toasts need to be dismissible as well.

I could include an x icon in the top right of the toast to dismiss them. Should I work on the functionality as well?

[ryandotfurrer]

Between those two I think maybe above the feedback button would be better so that the toasts don't block the hamburger menu.

I agree. Either that, or make the toast appear below the navbar entirely.

I could include an x icon in the top right of the toast to dismiss them. Should I work on the functionality as well?

No, let's keep this contained and not scope creep. Please feel free to make an issue for it though since I'm at work 🙂

[kepsteen]

Ok will do. Thanks for the clarification!