fix: menu responsiveness

## Description

The styling, sizing, text placement and animation of the menu on the `/findmycgpa` and `/findmysgpa` pages are inconsistent across screen sizes.

## Steps to reproduce

- Visit the /findmycgpa` or `/findmysgpa` pages on the [deployed site](https://mygpa.vercel.app) or a local instace.
- Open your browser dev tools
- Open device / responsive mode and play around with different screen resolutions (particularly mobile, iPad and larger monitor sizes) to see the inconsistencies.

## Expected Behaviour

- The sizing and text placement of the menu must be consistent across all screen sizes, without sacrificing aesthetic appeal.
- The "jerk" at the end of the closing animation must be replaced with a smoother closing animation.

## Images / Videos

https://github.com/user-attachments/assets/60d759ee-8942-4646-9ee0-7e6c5c38eca6