Fix regression in sticky page table of contents #295
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
Closes #293. #274 broke some of our CSS by removing the definition of
--header-height
intheme.css
.While it is true that
top-nav-bar.js
defines the CSS variable--header-height
, I did not realize that it does not expose the variable globally. It uses a "shadow DOM" for encapsulation. That is a good thing! But, it means we need to define--header-height
ourselves to use it in our own styling.Solution
I considered trying to dynamically compute the
--header-height
based on inspecting the.offsetHeight
of<qiskit-ui-shell>
. Unfortunately, we can only do this with JavaScript; the (ChatGPT-suggested) code made the project more complex.Instead, I took the simpler approach of copying the value
3.5rem
fromtop-nav-bar.js
. While this duplication is bad (Don't Repeat Yourself), we expect the value3.5rem
to be stable and the complexity of dynamically computing the value seemed even worse.