Update application heights SCSS variables describe expected behaviour

In variables.scss there are 4 calc variables used to add height for system header, performance bar, system footer, application header, and/or top-bar.

Updated in !114676 (merged) to include the top-bar when calculating the inner contents top position.

$calc-application-bars-height: calc(var(--system-header-height) + var(--performance-bar-height));
$calc-application-header-height: calc(#{$header-height} + #{$calc-application-bars-height} + var(--top-bar-height));
$calc-application-footer-height: var(--system-footer-height);
$calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height});

However, $calc-application-header-height isn't obvious as it's only the application headers once within the application. The top-bar is only added within the main contents.

Other instances where items are positioned at the top of the application use calc again to set calc(#{$header-height} + #{$calc-application-bars-height}), this inludes:

• whats_new.scss
• layout.scss
• sidebar.scss
• super_sidebar.scss
• tanuki_bot_chat.scss

It would be nice if these used an obvious/clear variable name as well. What is a clear name?

$calc-application-header-height is already in use, should this be updated to name which clarifies that it's the inner application which also contains the --top-bar-height?