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.

Sign up for GitHub

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

Jump to bottom

Layout shift when hovering over header in docs #866

Closed
aklinker1 opened this issue Dec 11, 2024 · 1 comment · Fixed by #867
Closed

Layout shift when hovering over header in docs #866

aklinker1 opened this issue Dec 11, 2024 · 1 comment · Fixed by #867

Comments

@aklinker1
Copy link
Contributor

aklinker1 commented Dec 11, 2024 •
edited
Loading

When you hover the mouse over an exported function's header, the "view code" button causes everything below the header to shift down several pixels. When scrolling through and exploring docs, this shift can cause you to lose your place on the page and get confused.

Screen.Recording.2024-12-11.at.11.06.55.AM.mov

Specifically, it appears the button goes from 26px tall to 28px tall because the ::before containing the "View Code" text is 16px tall, while the svg is 14px tall.

To fix, couple of options:

  1. Remove line-height: 1rem from body .ddoc { & .symbolGroup article > div:hover > div + a.context_button::before
  2. Change line-height: 1rem to line-height: 0.75rem (to match the font size)
Screen.Recording.2024-12-11.at.11.21.40.AM.mov

Both seem to work fine for mobile and desktop, but I'll open a PR implementing option 2 to align the line-height and font-size, common for centering text vertically.
@github-project-automation github-project-automation bot moved this to Needs Triage in JSR Dec 11, 2024
@aklinker1
Copy link
Contributor Author

aklinker1 commented Dec 11, 2024 •
edited
Loading

Ahh, tailwind. Hmm, that makes this a little more annoying.

jsr/frontend/static/styles.css

Line 478 in 4ac8c12

@apply hidden md:block text-xs;

I'll add leading-none to set the line height to equal the font size. Same thing as option 2 mentioned in the issue description.

@aklinker1 aklinker1 mentioned this issue Dec 11, 2024
Merged
github-merge-queue bot pushed a commit that referenced this issue Dec 14, 2024
@aklinker1
fix: prevent layout shift when hovering over doc header (#867)
f597b42 
This closes #866, see issue for video of original issue. Resolves the
shift caused by mismatch in the SVG and text heights.


https://github.com/user-attachments/assets/1b533313-60bc-4637-97d9-f0b51c4f4106
@github-project-automation github-project-automation bot moved this from Needs Triage to Done in JSR Dec 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
JSR
Status: Done
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: prevent layout shift when hovering over doc header aklinker1/jsr
1 participant
@aklinker1