Fix cropped nested expandable content in panels

[ang-zeyu]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

Fixes MarkBind/markbind#1166

What changes did you make? (Give an overview)
Reset the max-height of the panel content wrapper to its appropriate value
after expanding the panel, so that it can react to changes in the height of its content.

Provide some example code that this change will affect:

Resetting of maxHeight to appropriate values:
( it needs to be reset before collapsing as well so that the collapse animation would play )

afterExpand(el) {
  el.style.maxHeight = 'max-content';
},
beforeCollapse(el) {
  el.style.maxHeight = `${el.scrollHeight}px`;
},

Is there anything you'd like reviewers to focus on?
na

Testing instructions:

• nested panels' content should no longer be 'cropped out' of main panel

Proposed commit message: (wrap lines at 72 characters)

Fix cropped nested expandable content in panels

After finishing the panel expand animation or before the collapse
animation, the max height of the panel content wrapper is not
reset to their appropriate values.
This causes expandable content inside panels, such as nested panels.

Let’s do so, allowing the outer panel to react to changes in its
content height after expanding it.

[ang-zeyu]

Context:
vue uses v-show/v-if to detect transition changes, and there is no way to explicitly trigger the vue animation process.
Hence, the additions here manually trigger the new afterExpand hook, the only difference being that the event listener is removed once done.

For the above however ( this.expandedBool ), we want to loading to feel 'instant' ( even though it isn't ), hence there's no animation there

[marvinchin]

Haven't had the chance to test this out functionally, but the code looks good to me.

[marvinchin]

@ang-zeyu just wondering - would the height be computed for content that isn't immediately fully loaded?

[ang-zeyu]

Thanks for getting to this so quickly!

would the height be computed for content that isn't immediately fully loaded?

Yup, the only change here essentially is that after the end of expanding a panel, the max-height is reset to max-content to allow the container to expand if there's more expandable content inside it ( panels ).

This then necessitates also 'resetting' the max-height to the scrollHeight of the content before collapsing the panel again.

[marvinchin]

Cool, lets get this released then 🙂