Fix panel transition abruptly snapping to the end

[yucheng11122017]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Fixes #2185.

Current problem:

1. The panel is opened,
2. The max height of the panel is set to the scroll height of the panel which does not include the bottom margin of the panel-switch. The transition uses this value.
3. When it finishes the transition, the max height is set to none which is when the entire panel with the scroll button is displayed. This does not have a transition, resulting in the abrupt transition

Overview of changes:
Added collapse button's bottom margin to the panel's maxHeight when panel is transitioning.

Anything you'd like to highlight/discuss:
An alternative I thought of would be to scale up the maxHeight (eg. the maxHeight = 1.5 * scrollHeight)
Pros would be that if other components that are added in the future to the panels also have a bottom margin, there would be a need to keep including those elements in the calculation
Cons are the transition might not be as consistent since the ratio of the actual height (including the bottom margin) to calculated maxHeight would defer. And if a really large bottom margin is used, the problem would occur again

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)
Fix panel transition abruptly snapping to the end

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[lhw-1]

Thanks for the PR @yucheng11122017!

While the changes made seems to have solved the original issue, it seems introduces a new problem - the panels are snapping back when the panel body is minimized:

MarkBind.-.User.Guide_.Presentational.Components.-.Google.Chrome.2023-03-15.13-34-32.mp4

---

This is different from the original behavior where the closing transition would be smooth. Might want to look into this!

As a side note, I've realized that the original bug of the abrupt snapping does not occur on FireFox Ver. 110.0.1 (on Windows 10), but does occur on Google Chrome Ver. 111.0.5563.65 (also on Windows 10), while the new issue of snapping closing transition occurs on both. (I don't know if this is useful information, just something I noticed!)

[yucheng11122017]

Hi @lhw-1, thanks for the comments! I think the snapping back was the desired behavior as per #2159 which was just recently merged. It removes the closing transition for panels

[lhw-1]

Hi @lhw-1, thanks for the comments! I think the snapping back was the desired behavior as per #2159 which was just recently merged. It removes the closing transition for panels

Oh I see, I didn't realize this was now the intended behavior (though to be honest, having the closing transition seems more natural). Regardless, I suppose that means all's working as intended 👍

[raysonkoh]

LGTM! Tested on Chrome, Firefox and Safari. Interestingly, I didn't really notice the original issue on Firefox and Safari. Good job!

[ang-zeyu]

would creating a <div> wrapper with bottom padding instead work?