UI BUG: Mobile responsiveness issues in navbar and action buttons

While testing the EduAid web app on smaller screen sizes (mobile / narrow viewport),
the UI does not behave responsively.

Observed issues:
- Navbar items overlap or overflow on smaller screens
- Action buttons do not resize or stack properly
- Padding and spacing feel inconsistent on mobile view

Expected behavior:
- Navbar should adapt properly for mobile (collapse, wrap, or stack items)
- Buttons should resize or stack vertically on smaller screens
- UI should remain clean and usable across different screen sizes

Steps to reproduce:
1. Open the EduAid web app
2. Open browser dev tools
3. Switch to mobile view or reduce screen width
4. Observe navbar and button layout issues

Proposed fix:
- Improve responsive styling using CSS media queries / flexbox
- Adjust navbar and button layouts for smaller screens

I would like to work on fixing this issue and submit a PR.