What happened?
While testing the typing test page locally across different viewport sizes, I noticed several frontend layout issues.
The top settings/control bars can overlap the header and typing content instead of maintaining clear spacing from the content behind them.
The keyboard theme selector near the bottom can also overlap or sit too close to the footer content.
Additionally, in Dark theme, the bottom portion of the footer text can be clipped/covered by a bright horizontal line. The same footer content is displayed correctly in Light theme.
These issues are observable across different viewport sizes, although the overlap becomes more noticeable at narrower widths.
Steps to reproduce
- Go to
/app/taketypingtest.
- Open the page at any desktop viewport size.
- Observe the top settings/control bars and the typing content behind them.
- Resize the browser to different viewport widths and observe the layout.
- Scroll to the bottom of the page.
- Observe the keyboard theme selector and footer area.
- Switch to Dark theme.
- Observe the bottom portion of the footer text near the horizontal line.
- Switch back to Light theme and compare the same footer area.
What did you expect to happen?
The typing test page should maintain clear spacing between its controls, header, typing content, keyboard, and footer across different viewport sizes.
The controls and keyboard theme selector should not overlap surrounding content.
The footer should remain fully visible and should not be clipped or covered by a horizontal line in either Light or Dark theme.
Browser
Google Chrome 153
Theme
Dark
Screenshots or additional context
The @punctuation floating bar overlaps the header content behind it
The Keyboard skins floating bar is almost touching the footer lines
The Keyboard skins floating bar is almost touching the footer lines
Also there is a visible white line at the bottom (Possibly a theme issue as we can see the "y" of the "keyboard" word in the footer line on the white line so its not a random white line)
The issue was reproduced locally using the development build across multiple viewport sizes.
The footer comparison between Light and Dark themes shows that the footer content is fully visible in Light theme, while part of the footer text is obscured by a bright horizontal line in Dark theme.
No files were modified while investigating this issue.
What happened?
While testing the typing test page locally across different viewport sizes, I noticed several frontend layout issues.
The top settings/control bars can overlap the header and typing content instead of maintaining clear spacing from the content behind them.
The keyboard theme selector near the bottom can also overlap or sit too close to the footer content.
Additionally, in Dark theme, the bottom portion of the footer text can be clipped/covered by a bright horizontal line. The same footer content is displayed correctly in Light theme.
These issues are observable across different viewport sizes, although the overlap becomes more noticeable at narrower widths.
Steps to reproduce
/app/taketypingtest.What did you expect to happen?
The typing test page should maintain clear spacing between its controls, header, typing content, keyboard, and footer across different viewport sizes.
The controls and keyboard theme selector should not overlap surrounding content.
The footer should remain fully visible and should not be clipped or covered by a horizontal line in either Light or Dark theme.
Browser
Google Chrome 153
Theme
Dark
Screenshots or additional context
The @punctuation floating bar overlaps the header content behind it
The Keyboard skins floating bar is almost touching the footer lines
The Keyboard skins floating bar is almost touching the footer lines
Also there is a visible white line at the bottom (Possibly a theme issue as we can see the "y" of the "keyboard" word in the footer line on the white line so its not a random white line)
The issue was reproduced locally using the development build across multiple viewport sizes.
The footer comparison between Light and Dark themes shows that the footer content is fully visible in Light theme, while part of the footer text is obscured by a bright horizontal line in Dark theme.
No files were modified while investigating this issue.