[FEATURE] Give proper control of header height for responsive designs (PC/Mobile)

Currently there's no non-dodgy way to set a different dock size (e.g. the height of a header navigation dock) based on the screen size its being displayed on.

There's the function system.perspective.alterDock which can set the size, but as soon as you change page, it bounces back to the height defined in the page config. You can hack a crap solution together for example looking for a change in page path and altering the dock size again, but this is fraught with issues like:

  • if the user opens the same page again, the dock size bounces back and because there was no change in page path, it stays there
  • if you open the same page but with different URL params, again there's no page path change, so it bounces to default height

The only way to work around the above 2 issues is do first navigate to another page first, and then to your actual page, and there has to be a short delay between these..

However with all work arounds, the header still resizes to the default size and then back to the proper size after the alterDock function is run, so the user still sees a dodgy looking unprofessional bouncy animation...

Can this please be resolved?

Idea: