Fix display of accordion in sidebar on short pages
This MR fixes the bug described in https://code.librehq.com/ots/clients/lfc/torque-tracker/-/issues/155.
The correct display of accordions in the sidebar -- which should be fixed in the viewport when the user scrolls down, but which shouldn't be taller than the viewport and should internally scroll -- only worked after the user had interacted with the accordion (opened or closed it). That's because some crucial formatting was only applied as part of the interaction handler.
This MR refactors the code a bit for clarity and re-use, and then additionally applies that crucial formatting on page load.
Testing:
- On
main
, go to a page with a long accordion in the sidebar that defaults to open. (E.g., a NewWork idea page with an Initial Evaluation form.) - Make the viewport substantially shorter than the accordion contents, and scroll down far enough that the accordion's sticky positioning kicks in.
- Refresh the page (to make sure you're getting the "fresh experience")
-
❌ The bottom contents of the open accordion item should be clipped with no way of scrolling to them. (See "before" image below.) - Switch to the
fix-accordion-display
branch - Refresh the page.
-
✅ The bottom contents of the open accordion item should be accessible via an internal scroll. (See "after" image below.)
Closes https://code.librehq.com/ots/clients/lfc/torque-tracker/-/issues/155
Edited by Justin Reese