Close button of messages with longer details gets squeezed

[Cito]

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

StackBlitz demo https://stackblitz.com/edit/primeng-messages-demo

Current behavior The close button of inline messages and toast messages appears horizontally squeezed when the detail text does not fit into one line.

Expected behavior The shape and size of the close button should always be the same no matter what the content of the mesage is.

Minimal reproduction of the problem with instructions

• Visit the above StackBlitz demo
• The top messages have a short detail text "Message Content" and probably everything will look fine.
• Add more text to one the detail properties, so that the detail text will be broken to 2 or 3 lines and/or make the output window pane very narrow, so that the message content will be larger than the message box.
• Now the close button of such messages will get squeezed horizontally so that they don't appear as a circle, but as an ellipse when you hover over them.

What is the motivation / use case for changing the behavior? Alerts should not look ugly and close buttons should be easy to hit with the mouse.

Please tell us about your environment:

• Angular version: 11.0.9
• PrimeNG version:: 11.3.0
• Browser: all

Suggested solution

In the theme.css files, the following should be changed:

.p-message .p-message-close {
  width: 2rem;  /* use min-width instead of width here! */
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.p-toast .p-toast-message .p-toast-icon-close {
  width: 2rem; /* same here! */
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

[waratah]

My toast icon is now overrun with no space blocks of text however you can actually close the toast.

''' .p-toast .p-toast-message { width: 19rem; } '''

for the record my overall toast is 25rem; so I just played with numbers until the closed stay.

[cetincakiroglu]

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,

[l-uuz]

@cetincakiroglu Not solved yet.

[KyrumX]

Still an issue on 16.1.0: https://stackblitz.com/edit/5xhmjp?file=src%2Fapp%2Fdemo%2Ftoast-basic-demo.ts