UX: Ensure sticky elements don't overflow header (PR #14432)

The header height is the same on the vast majority of Discourse sites, but there are some exceptions. This PR adds a way to have the header’s offset always available so we can correctly calculate the placement of specific elements. This is done by adding/updating the --header-offset CSS custom property.

It simplifies and makes consistent several things:

  • the position of sticky table headers
  • the position of the topic timeline
  • the max height of the composer (which previously could exceed the viewport height too)

And more importantly, the position of all these elements should work correctly on all scenarios, including the iPad DiscourseHub app and custom themes with taller headers (whether docked or not).

@awesomerobot @jordanvidrine We will likely need to do some cleanup in customer themes,

GitHub