fix(tape mode): tape mode not centering properly on window resize (@laroccol) #6135
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
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