Skip to content

Fix display of accordion in sidebar on short pages

Justin Reese requested to merge fix-accordion-display into main

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:

  1. 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.)
  2. Make the viewport substantially shorter than the accordion contents, and scroll down far enough that the accordion's sticky positioning kicks in.
  3. Refresh the page (to make sure you're getting the "fresh experience")
  4. The bottom contents of the open accordion item should be clipped with no way of scrolling to them. (See "before" image below.)
  5. Switch to the fix-accordion-display branch
  6. Refresh the page.
  7. The bottom contents of the open accordion item should be accessible via an internal scroll. (See "after" image below.)

Before: 1-before

After (note the scrollbar): 2-after

Closes https://code.librehq.com/ots/clients/lfc/torque-tracker/-/issues/155

Edited by Justin Reese

Merge request reports