Alert web component does not detect the overflow in some cases

[Alienah]

Describe the bug

We are using the alert component in my team and we have encountered a problem. The content that we are introducing inside the slot has overflow, however the web component does not seem to detect it and therefore allow the scroll to be activated.

How to reproduce

Here we see an example using the same content inside the web component and outside the web component. We can see that in the second example (outside the web component) a scroll bar is displayed. That is the desired behaviour.

https://stackblitz.com/edit/clarity-javascript-demo-sjwgpi?file=src%2Findex.html

Steps to reproduce the behavior:

1. Go to the index
2. See the example showing a code content inside the alert box and outside the alert box

Expected behavior

We can see that in the second example (outside the web component) a scroll bar is displayed. That is the desired behaviour.

Versions

Clarity project:

• [x ] Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• [ x] v6.x

Framework:

• Angular
• React
• Vue
• [x ] Other:

Framework version:
Vanilla Javascript and HTML

Device:

• Type: [MacBook]
• OS: [iOS]
• Browser [chrome]
• Version [103.0.5060.134 ]

Additional notes

Add any other notes about the problem here.

[github-actions]

🎉 This issue has been resolved in version 5.8.1 🎉

The release is available on:

• GitHub release
• v5.8.1

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 6.1.1 🎉

The release is available on:

• GitHub release
• v6.1.1

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.