The sticky footer on the website is unreliable at certain screen resolutions. We should refactor the sticky-footer code to fix the tendency to cover up content or position itself incorrectly in certain scenarios.

The concept of the sticky footer is that it should appear at the bottom of the screen if the page is less than the height of the view (example), or at the bottom of the content if the page is more than the height of the view (example).

A function in site.js is used to reposition the sticky footer whenever the page resizes, to catch cases where the page is resized and the breakpoint of page height > view height is crossed.

Unfortunately, this page resize function doesn't catch all page resizes. For example, it doesn't catch cases where an expansion/accordion panel increases the page height. This can lead to issues where the footer is rendered on top of and thereby obscuring page content.

We should fix this issue by refactoring the methodology for the footer positioning. Instead of using javascript to toggle the footer sticky-ness according to page height, we should simply use a flex layout to grow the page content to the height of the view if it were shorter than the view. The footer would then statically occur at the bottom of the page content, and the flex functionality would position it at the bottom of the page due to the behavior of flex-grow.

In other words, growing the height of the HTML to actually fill the page, instead of only being the height of the content as it is currently: