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(layout): consolidate sticky header #8781

Merged
merged 6 commits into from
May 8, 2023
Merged

fix(layout): consolidate sticky header #8781

merged 6 commits into from
May 8, 2023

Conversation

fiji-flo
Copy link
Contributor

@fiji-flo fiji-flo commented May 5, 2023

Summary

use --sticky-header-height everywhere

(MP-165 + MP-156)

Problem

On prod when scrolling on an article page the toc is moving by 2px because the offset was wrong. This is worse on staging with the top banner.

Solution

Consolidate the offset to use -sticky-header-height. This should fix the issue at hand without touching to much of our fragile CSS.


Screenshots

Before

image

After

image

use `--sticky-header-height` everywhere
@fiji-flo fiji-flo requested a review from caugner May 5, 2023 12:02
@fiji-flo
Copy link
Contributor Author

fiji-flo commented May 5, 2023

This is breaking the ToC (breaking it more). Working on a fix 😮‍💨

@github-actions github-actions bot added the plus work around features related to MDN Plus label May 5, 2023
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

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

LGTM, just two nits.

@fiji-flo fiji-flo requested a review from caugner May 5, 2023 15:14
@fiji-flo fiji-flo merged commit 496ab9f into main May 8, 2023
@fiji-flo fiji-flo deleted the sticky-header branch May 8, 2023 09:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
plus work around features related to MDN Plus
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants