Resolve React Layout Glitches

The React front-end of my web app is misbehaving: components shift, grids break, and spacing collapses on a few key pages. Functionality is fine, but the user experience feels rough because of these layout-related UI/UX glitches.

Here is the context you need:
• Tech stack: React on the front end, Python powers the back end, yet the issues are isolated to React.
• Problem scope: strictly layout—no data flow or API errors. Elements overlap, responsive breakpoints look off, and some sections do not align consistently between desktop and mobile views.

What I expect from you:
1. Pinpoint the root causes (CSS rules, component structure, flex/grid misuse, etc.).
2. Refactor or replace problematic code so every affected page renders cleanly on common modern browsers and screen sizes.
3. Leave concise comments or a short hand-off note explaining what was changed so I can maintain it later.

Acceptance criteria:
– No visual overlaps or broken grids at 320 px, 768 px, and 1440 px widths.
– Consistent spacing and alignment across all affected components.
– Lighthouse or similar audit shows “Layout Shift” issues resolved (green scores).

You will work solely in the React layer; Python back-end access is unnecessary. Once fixed, push a clean commit or deliver a zipped patch—whichever is easier for you.