fix: overscroll behaviour

[Mihir2423]

PR Title:
Fix whitespace "bounce" effect at the top and bottom of the page

Description:
This PR resolves the issue where excess whitespace appears when scrolling to the top or bottom of the page, creating a "bounce" effect.

ui_bug_demo.mov

[SujithThirumalaisamy]

can you add the fix video

[Mihir2423]

can you add the fix video

VID-20240917-WA0012.mp4

[SujithThirumalaisamy]

I think we can have the bounce effect. but should have the same background which the forground have. Eg: There shoud the same purple gradient in the back to make the effect seamless

[Mihir2423]

I think we can have the bounce effect. but should have the same background which the forground have. Eg: There shoud the same purple gradient in the back to make the effect seamless

I don't think we can achieve that because the foreground already has a linear gradient applied.

I've attempted the following fixes:

• Added an image
• Applied a linear gradient
• Tried several Stack Overflow suggestions, including setting background-attachment: fixed

However, all of these led to the same result, as shown in the video.

result.mp4

[SujithThirumalaisamy]

Dark color in the back will be good rather than white with high contrast.

[Mihir2423]

Dark color in the back will be good rather than white with high contrast.

demo.mp4