Toast messages don't handle very small screens well

[adama357]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior If I set the device (in the browser dev tools) to be something very narrow like iPhone 5/SE, the toast message exceeds the horizontal boundaries of the screen.

Expected behavior The toast message should horizontally shrink as needed to fit the screen (with margins on either side)

Minimal reproduction of the problem with instructions Docs page: https://www.primefaces.org/primeng/showcase/#/toast

What is the motivation / use case for changing the behavior? It looks unintentional / wrong

Please tell us about your environment: Windows 10

• PrimeNG version: 11

• Browser: [Chrome 88 ]

[andi-dev]

I would have also expected toasts to scale nicely on smaller screens. My solution to handle this myself is adding the following css rule:

.p-toast {
  max-width: calc(100vw - 40px);
}

The toast is positioned at 20px from the right, thus substracting 40px from the viewport width is nicely centering the toast in the middle of the screen.

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[anuragjatofficial]

Looks like we still have this issue for smaller screens

---

toast is lacking responsiveness for smaller screen sizes , I feel @andi-dev provided nice solution for this issue