Default toast messages not appearing and positioning issue after upgrading to v3.17.1

[chinmay-mehta]

Describe the Bug

• After the upgrade toasts that are present when a user performs save/update/delete or on any validation errors is no longer visible, all the actions are performed but the user isn't notified of the action on the UI.
• Am I missing something that was a part of the changes. I read through the release notes but couldn't find anything immediately relevant to this.
• I tried deleting package-lock, node_modules and running npm i but still the same.
• There is a positioning issue as well with the toast where it appears at bottom left; please refer the attached video.
• I haven't added a link to repro as this happens with a new project created using npx create-payload-app@latest -t blank
• Link to discord discussion where others are facing the same issue as well: https://discord.com/channels/967097582721572934/1031993785971900556/threads/1329452790019260476

bug-repro.mp4

Link to the code that reproduces this issue

https://github.com/payloadcms/payload

Reproduction Steps

1. Create a new app using npx create-payload-app@latest -t blank
2. Navigate to media collection -> upload a new image -> check the toast positioning.
3. In my existing project toasts have completely disappeared.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Payload: 3.17.1
Node: 20.13.1
Next: 15.0.4

[github-actions]

Please add a reproduction in order for us to be able to investigate.

Depending on the quality of reproduction steps, this issue may be closed if no reproduction is provided.

Why was this issue marked with the invalid-reproduction label?

To be able to investigate, we need access to a reproduction to identify what triggered the issue. We prefer a link to a public GitHub repository created with create-payload-app@beta -t blank or a forked/branched version of this repository with tests added (more info in the reproduction-guide).

To make sure the issue is resolved as quickly as possible, please make sure that the reproduction is as minimal as possible. This means that you should remove unnecessary code, files, and dependencies that do not contribute to the issue. Ensure your reproduction does not depend on secrets, 3rd party registries, private dependencies, or any other data that cannot be made public. Avoid a reproduction including a whole monorepo (unless relevant to the issue). The easier it is to reproduce the issue, the quicker we can help.

Please test your reproduction against the latest version of Payload to make sure your issue has not already been fixed.

I added a link, why was it still marked?

Ensure the link is pointing to a codebase that is accessible (e.g. not a private repository). "example.com", "n/a", "will add later", etc. are not acceptable links -- we need to see a public codebase. See the above section for accepted links.

Useful Resources

• Reproduction Guide
• Contributing to Payload

[fcastrovilli]

having the same positioning issue. this happens with any kind of toast not just with the default ones.

found out if i disable these styles i can see the toasts to be well positioned again:

:where([data-sonner-toaster][data-y-position="bottom"]) {
    bottom: var(--offset-bottom);
}

:where([data-sonner-toaster][data-x-position="right"]) {
    right: var(--offset-right);
}