Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix regression in sticky page table of contents #295

Merged
merged 2 commits into from
May 4, 2023

Conversation

Eric-Arellano
Copy link
Collaborator

Problem

Closes #293. #274 broke some of our CSS by removing the definition of --header-height in theme.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 from top-nav-bar.js. While this duplication is bad (Don't Repeat Yourself), we expect the value 3.5rem to be stable and the complexity of dynamically computing the value seemed even worse.

Copy link
Collaborator

@javabster javabster left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🚀

@Eric-Arellano Eric-Arellano merged commit f3cab33 into Qiskit:main May 4, 2023
@Eric-Arellano Eric-Arellano deleted the fix-header-height branch May 4, 2023 13:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Triage when page table of contents stickiness broke on main
2 participants