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

Closed
wants to merge 1 commit into 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
@Miodec Miodec closed this in a2f6c1f Jan 2, 2025
@Miodec
Copy link
Member

Miodec commented Jan 2, 2025

While this fix is more of a bandaid, it pointed me in the direction of the cause of this issue and I implemented a proper fix - feel free to have a look at it. Thank you.

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
3 participants