fix(newline indent): tape mode and smooth line scroll (ikarofelix)

[ikarofelix]

Description

Fixed prettier problems by running npm run pretty-fix Fixed the issue: #3907 After reviewing the PR #4579, decided to make some improvements and reopen it Made sure to run the tests, lint and prettier configs. Also tested by myself tabs and configs I could think of I'm new to the project, so if there's any problem let me know, so I can address it

Checks

• [ ] Adding quotes?
  • [ ] Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
• [ ] Adding a language or a theme?
  • [ ] If is a language, did you edit _list.json, _groups.json and add languages.json?
  • [ ] If is a theme, did you add the theme.css?
    • Also please add a screenshot of the theme, it would be extra awesome if you do so!
• [X] Check if any open issues are related to this PR; if so, be sure to tag them below.
• [X] Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• [X] Make sure to include your GitHub username inside parentheses at the end of the PR title

Closes #

#3907

#4578 #4579

[Miodec]

Loading a test gets rid of the UI typing a single character gets rid of the text

Also somehow got this

Testing in code javascript

[monkeytypegeorge]

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. https://github.com/monkeytypegame/monkeytype/actions/runs/7696488648

[github-actions[bot]]

This PR is stale. Please trigger a re-run of the PR check action.

[github-actions[bot]]

This PR is stale. Please trigger a re-run of the PR check action.

[ikarofelix]

Loading a test gets rid of the UI typing a single character gets rid of the text

Also somehow got this

Testing in code javascript

After reviewing I saw that there's 3 scenarios:

• The zen screen, where the newline div and after-newline are created in the moment
• The normal one, where there's no newline and it's only one line the entire array of words
• The quote with languages one, where it creates the words, adds the newline and after that the after-newline

Based on that, I decided to target both first and third scenarios, where the first scenario was already working, the second one didn't need to do anything, so the third one will be fixed by this last commit because it will only add a margin-left on after-newline when it gets close to it and after that keep updating the margin-left when it's needed

I decided to take this way because if the margin-left gets setted every time without getting close, the #words margin-left goes up to 4000 or something like that, which gets rid of the ui as reported, and I believe that's related to the #words implementation itself and decided to take this course of action

This bug is happening in production on both first and third scenarios, so I hope this will fix it and not have another bug like reported

Anyway, I'll be waiting on your feedback

[ikarofelix]

Besides everything mentioned above, handled what was missing:

• Tape Mode = Off | Smooth Line Scroll = Off (Working on both Quote and Zen)
• Tape Mode = Letter | Smooth Line Scroll = Off (Working on both Quote and Zen)
• Tape Mode = Word | Smooth Line Scroll = Off (Working on both Quote and Zen)
• Tape Mode = Off | Smooth Line Scroll = On (Working on both Quote and Zen)
• Tape Mode = Letter | Smooth Line Scroll = On (Working on both Quote and Zen)
• Tape Mode = Word | Smooth Line Scroll = On (Working on both Quote and Zen)

All combinations tested in cases mentioned previously

[Miodec]

Still getting this issue

[github-actions[bot]]

This PR is stale. Please trigger a re-run of the PR check action.