future-standard / scorer-ui-kit

SCORER UI Components in react with styled components
Other
6 stars 3 forks source link

Hotfix: Main Menu - Sub Menus wrong height if contents was changed after initialisation #504

Closed atomworks closed 2 weeks ago

atomworks commented 2 weeks ago

In the main menu, when sub-menu items were being added or removed conditionally the useEffect that was calculating the height of the container to animated the closing was not firing. This led to the container being the wrong height and rendering incorrectly.

I've removed this max-height approach and replaced it with a CSS only method that will render the open height natively in the browser, meaning it is scalable and does not require and recalculation in our code to achieve.

This implementation leaves in some code that appears to be redundant but would take additional fix and review time that is riskier to deploy for this hotfix, due to delivery pressures on the projects relied on. However, I will follow up immediately on these changes in PR #505.

Note: This breaks the layout of the mobile menu menu heights. This is not an issue for this hotfix.

Here are two videos, the first is the issue. You'll see the default state, some items added to code and saved which causes a broken sub menu state. This is fixed on refresh.

https://github.com/user-attachments/assets/95c0c4fb-01f0-45cb-905d-14a0e0a01e71

And the fixed version that works as intended.

https://github.com/user-attachments/assets/9c2d169d-d90d-4f36-855e-457507c91c43