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(tape mode): tape mode not centering properly on window resize (@laroccol) #6135

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

laroccol
Copy link

Description

When tape mode was enabled (letter or word) there was an issue when you went from a large screen size to a small screen size and restarted the test. The text/caret would not be centered on the screen and depending on how small the screen width you couldn't see it at all. The root of the issue seems to be that the focused element goes out of view so the browser tries to scroll it into view. This causes the words container to be offset by the scroll amount + the margin offset used for tape mode.

image

To fix this I set the word box's scroll left to 0 whenever the tape is updated. I put it in a settimeout so it runs after the current execution flow because the focusing was happening after it. This is more of a band aid fix in order to not mess with things outside the tape mode scope.

Closes #6093

@monkeytypegeorge monkeytypegeorge added the frontend User interface or web stuff label Dec 25, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
frontend User interface or web stuff
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tape mode doesn't appear centered when changing window size
2 participants