Add custom error toast message width on mobile

[rjwignar]

Similar to #577, this fixes #569 by making toast error messages fit the viewport when mobile is detected.

However, instead of adding the container style within the useAlert, the container styling is applied to the error useCallback.

This appears to avoid the bugs caused by #577 and reported in #586, but I'd like more opinions.

If this does fix the issues previously encountered, do we also want to apply this change to the rest of the useCallbacks?

[cloudflare-workers-and-pages]

Deploying chatcraft-org with    Cloudflare Pages

Latest commit:	a37b9f6
Status:	✅  Deploy successful!
Preview URL:	https://43dd7fcd.console-overthinker-dev.pages.dev
Branch Preview URL:	https://issue-569-2.console-overthinker-dev.pages.dev

View logs

[kliu57]

Looks good to be, not experiencing any of the issues from before.

[kliu57]

@WangGithub0 @Rachit1313 Could one of you test this toast width on Safari? The test is just that the toast width when you enter an invalid key for your current provider will not exceed the length of the page. (The red toast alert)

[kliu57]

@rjwignar @humphd Actually, I think for now we just need to apply this "toast width fix" to the "error type toast", since we are only getting the exceed screen width issue with very long messages. (And we don't have any long messages for success, info, or warning). Unless we want to apply it as a precaution for future cases.

[WangGithub0]

@WangGithub0 @Rachit1313 Could one of you test this toast width on Safari? The test is just that the toast width when you enter an invalid key for your current provider will not exceed the length of the page. (The red toast alert)

I tested on Safari, looks good.