Accordion not expanding/collapsing correctly

[ashleynuttall]

Describe the bug

Accordion content panel does not correctly expand/collapse when nested content is expanded/collapsed. When nested content is expanded it gets partially hidden, constrained by the parent's current size.

It works correctly in Chrome and Firefox if motion is set to on. It doesn't work at all in Safari.

How to reproduce

Steps to reproduce the behavior:

1. Go to 'https://stackblitz.com/edit/clarity-javascript-demo-jyubph?file=src/index.html'
2. Click on 'Header 1'
3. Click on 'Header 1.1'
4. On Chrome, FF and Safari content is partially hidden; cf. 'Header 2' which works correctly on Chrome and Firefox.

Expected behavior

Accordion content should correctly resize to fit its current content.

Versions

Clarity project:

• Clarity Core
• Clarity Angular/UI

Clarity version:

• v5.x
• v6.x

Framework:

• Angular
• React
• Vue
• Other: plain JS.

Framework version:
Vue 3.2

Device:

• Type: MacBook Pro
• OS: macOS 13.1
• Browser Chrome 109.0.5414.87, Safari 16.2, Firefox: 109.0