Even with a popper, it's not easy to make the content spans the full width of cpl_root only. We can probably make it work with more effort.
When there's no item on the list, the body collapses and it causes some elements in the footer to be shown on top of the popper content. We may want to consider displaying some sort of an empty state first before we try to address this.
⚠️ Performance note! There's a lot of DOM being created. Even if we have 500 items, each item produces 3-5 DOM nodes. This can cause a noticeable lag between user input and visual feedback (e.g. opening the popper straight in "view all" mode). We may want to consider changing the UX (user flow) on selecting topics. We could try to virtualize the list but we could lose the scrolling behavior since only the visible items actually get rendered to the DOM. My suggestion is to switch from showing all topics to only showing topics under the selected letter.
See commit messages for context.
https://user-images.githubusercontent.com/11132446/137648596-cb976295-e035-4f28-9c68-755ce948bcf4.mp4
Caveats:
cpl_rootonly. We can probably make it work with more effort.