React Typing Site UI Fix

My typing practice website is built with React and everything works functionally, yet the interface falls apart whenever the screen size changes. Buttons drift, sections stack in the wrong order, and some components slip off-screen on tablets and phones. I have already narrowed the problem to layout and alignment rather than business logic, so what I need now is a focused front-end cleanup: • Audit the existing JSX, CSS-in-JS, and media-query setup. • Correct responsive behaviour so every page looks consistent from 320 px wide up to large desktop. • Ensure flexbox or grid is used properly so no elements overlap and all content stays centred where intended. • Deliver updated source files (or clearly-documented pull request) plus a brief note of what was changed so I can maintain it later. The codebase is plain React with functional components; no class components or Redux involved. If you prefer a utility framework such as Tailwind or want to refactor to styled-components, that is fine as long as the final look matches the current design. I am ready to give you access to the Git repository as soon as we start and can test changes immediately on multiple devices to confirm the fixes.

Project ID: 40413063