Skip to content

Use CSS calc to reduce complexity when offsetting height for system bar and performance bar

Defining problem

When we calculate the height (or top position) of certain elements that are positioned sticky or fixed, we need to take into consideration whether the system bar and performance bar are opened:

image

This results in a complex CSS that would grow combinatorically if we were to add more of these "bars".

.diff-tree-list {
  top: $top-pos;

 .with-system-header & {
    top: $top-pos + $system-header-height;
  }

  .with-system-header.with-performance-bar & {
    top: $top-pos + $system-header-height + $performance-bar-height;
  }

  .with-performance-bar & {
    top: $top-pos + $performance-bar-height;
  }
}

Proposal

Widely use the approach from !59150 (merged) utilizing calc() and CSS Custom properties:

.with-system-header {
  --system-header-height: #{$system-header-height};
}

.with-performance-bar {
  --performance-bar-height: #{$performance-bar-height};
}

.diff-tree-list {
  top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px));
}

We can set the custom properties only once, further reducing the amount of CSS code.

Related

/cc @andr3 @iamphill

/cc @psimyn (since you've seem to fight similar battle in #322086 (closed))

Edited by Tomas Vik (OOO back on 2026-01-05)