kolibri: PDF Pages height are not rendering dynamically

Observed behavior

Issue observed while testing #11145.

When a PDF is rendered, the height of the first page to be rendered is used, and this height is used for all other pages. The problem is if there are PDFs that have pages with different heights, for example, if there are some pages in landscape and others in portrait.

When a landscape page is the first page to be rendered, the portrait pages overflows its height and renders on top of the following page:

When a portrait page is the the first page to be rendered, the landscape pages present a big gap between them and the following pages:

This issue is because we use a virtual list for rendering the pages list and render the pdf pages on demand. But this component renders a fixed-size list, which takes the same height for every list item.

Expected behavior

The PDF Renderer list should render a dynamic-size virtual list. We can do this by keeping the vue-virtual-scroller library or installing a new library that allows dynamic-size virtual lists.

Steps to reproduce

Import the Kolibri QA channel (import token nakav-mafak), and open the “PDF page orientation” resource.