hypothesis
Make PDF side-by-side feature work comfortably on (somewhat) narrower viewports
Right now, the narrowest viewport in which we can accommodate side-by-side mode is ~1108px. This includes ~428px for the expanded sidebar and a minimum of 680px for the PDF.js container element. That 680px minimum is because PDF.js' toolbar starts breaking down at narrower widths currently (tool buttons start rendering on top of each other, e.g.).
With the viewport constraints of our users, especially within LMS contexts, we need to be able to do better here (i.e. be able to render PDFs in a narrower container than 680px).
On its own, PDF.js' toolbar and UI does fine down to 320px. Lots of media queries to make this work in its nearly 4k lines of CSS.
However, the media queries in PDF.js' CSS apply to the entire viewport (because that's how media queries work, of course). PDF.js tends to assume it's using the entire viewport, but here it is sharing the viewport with 428px of the sidebar. That means that its media queries are "factored wrong" for our side-by-side mode.
We'll need to override some of these media queries when side-by-side mode is enabled, such that the toolbar lays out more comfortably in side-by-side mode with constrained viewports.
Fortunately, all of these media queries are right at the end of viewer.css, so perhaps this task isn't that onerous.
See discussion in Slack: https://hypothes-is.slack.com/archives/C07NXBDNW/p1602276391065900
