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): avoid sidebar overflow beyond footer #11621

Merged
merged 2 commits into from
Sep 6, 2024

Conversation

C17AN
Copy link
Contributor

@C17AN C17AN commented Aug 10, 2024

Summary

Fixes #11609.

Problem

If the sidebar contains many elements, an unnecessary scroll area would be added on devices with a width between 768px and 1200px.

Solution

The same issue did not occur on desktop, so I first identified which element's style was different. After confirming that the issue was occurring with the .sidebar element, I applied position: sticky as it was on the desktop.


Screenshots

Before

image

화면 기록 2024-08-10 21 34 11

After

image

화면 기록 2024-08-10 21 38 32


How did you test this change?

@C17AN C17AN requested review from mdn-bot and a team as code owners August 10, 2024 12:46
@github-actions github-actions bot added the dependencies Pull requests that update a dependency file label Aug 10, 2024
@C17AN C17AN changed the title Style: Add "position: sticky" to the sidebar element at the tablet breakpoint style: Add "position: sticky" to the sidebar element at the tablet breakpoint Aug 10, 2024
@caugner caugner changed the title style: Add "position: sticky" to the sidebar element at the tablet breakpoint fix(layout): make sidebar sticky to avoid overflow beyond footer Sep 6, 2024
@caugner caugner changed the title fix(layout): make sidebar sticky to avoid overflow beyond footer fix(layout): avoid sidebar overflow beyond footer Sep 6, 2024
client/src/document/organisms/sidebar/index.scss Outdated Show resolved Hide resolved
@caugner caugner merged commit 8b0792f into mdn:main Sep 6, 2024
10 checks passed
@caugner
Copy link
Contributor

caugner commented Sep 6, 2024

Thank you @C17AN for your investigation and the light-weight fix! 🙌

@C17AN
Copy link
Contributor Author

C17AN commented Sep 6, 2024

I'm glad it helped!
Have a nice day! 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Page keeps Scrolling Down after footer between specific widths
2 participants