Scrolling Behavior Fixes for All Applicable Pages

[dangminhduc1101]

Problem

The scrolling behavior is disrupting the layout on some pages. It is unclear which pages are affected.

Expected Behavior

When the page overflows and is scrolled down:

Current Behavior

When the page overflows and is scrolled down:

Instructions

1. Pull the latest changes from the develop branch.
2. Start the server by running npm run dev (navigate to the src/ folder and run npm ci if needed).
3. Review all current pages and identify anywhere the scroll/overflow issue occurs (note that this also happens to the Feedback component). Comment on this issue and tag @dangminhduc1101 with the list of affected pages.
4. Apply a fix to the affected pages. Describe your solution to this issue, as tbh I'm unsure how to solve it.
5. Submit a pull request and tag @dangminhduc1101 for review.

[terry9041]

List of pages with unintended scrolling behavior:

1. register
2. checkin

I also fixed some styling on manage/shift page

Changes made:

navbar component for manager and volunteer side: set z index to 10 from 50 to avoid confusion and conflict with the dropdown component of "z-50"

layout.tsx for volunteer: removed TimeDisplay to page.tsx of register and checkin

register page.tsx: grouped the upper half (TimeDisplay and form element) and set them to "sticky top-0", also applying "overflow-y-hidden" to ensure that the overflow scroll bar is applied on the child grid component, not the entire component

checkin page.tsx: same as register page.tsx

grids component: made sure they all have "overflow-y-scroll" so that the scroll bar happens at the right component

feedback: changed "absolute" to "fixed" to make sure it is positioned with respect to the viewport entirely, not the closest ancestor (which is close to viewport level, but not exactly is)