Fix scrolling in fixed frames

[rempsyc]

Continuation of #41

Comment 1: I don’t love the fixed frame that exists currently when viewing this from the web. It requires scrolling through each box separately, and means that you’ll miss really important information. Instead, I would just make each section as long as it needs to be rather than having embedded frames.

I also don't love it... but the flexdashboard interface isn't so flexible. What I don't like in particular is that it tends to look good on large screen where you don't actually have to scroll for each boxes, but on small screens it looks awful :( Don't know how to fix this at this point. It would probably require looking again at the documentation at: https://pkgs.rstudio.com/flexdashboard/articles/using.html#scrolling-layout. Possibly relevant:

By default flexdashboard charts are laid out to automatically fill the height of the browser. This works well for a small number of vertically stacked charts, however if you have lots of charts you’ll probably want to scroll rather than fit them all onto the page. You can control this behavior using the vertical_layout option. Specify fill to vertically re-size charts so they completely fill the page and scroll to layout charts at their natural height, scrolling the page if necessary.

[rempsyc]

From a first investigation, it seems that the above trick can fix the box scrolling but then messes up the upper boxes, which I will need to find a fix for

[rempsyc]

When using boxes, I could fix the html title take-home message at the center of the box using custom css:

But now that we use scrolling, this strategy isn't working anymore:

[rempsyc]

I don't know how to place the HTML text correctly and dynamically for each screen if we remove the boxes

[rempsyc]

I don't know if that would work but one workaround could involve taking a screenshot of the take-home message as it is now and then trying to use this image to place it better than using custom css and html

[rempsyc]

Alright, so I was able to (thanks chatGPT) to fix the css code to enable to keep the take-home message centered horizontally and vertically in its own box even when using vertical_layout: scroll.

However, one last annoying problem is that for some reason when the page loads it defaults to scrolling down just enough to hide the title of the gauge box so people will surely miss it :/

[rempsyc]

The other problem is that vertical_layout: scroll messes up the row height of all the other pages, which usually automatically and dynamically stretched to the size of the screen, e.g.,