fix: Overlapping scrollbars of `html` and `main`

[amithm7]

Remove px based height calculation of main element (e.g. h-[calc(100vh-113px)]). Such calculations don't create expected rendering on other displays of different font and resolution configurations. With miss-calculation, html may overflow and create an overlapping scrollbar.

This change fixes the issue.

Fixes #23

[amithm7]

Since nobody's watching repo, tagging @gadogado

[gadogado]

hey @amithm7 thanks for taking the time to try and improve this! appreciate it

I don't think your change is quite what we want though as it breaks some of the core intended behavior/functionality:

1. <Header /> needs to be 'sticky' and not scroll
2. <Header /> should not have a vertical scrollbar
3. main needs to overflow scroll
4. New Items in main need to be async loaded ( infinite scroll ) upon exceeding or reaching a bottom scroll position threshold

Let me know if you need help getting the project running locally or if I'm missing something. thanks!

[amithm7]

Hmm, didn't expect to break something like async loading of new items.

I didn't try running this locally. Let me see. Looks like easy fixes here.

[amithm7]

@gadogado , restored intended behavior/functionality.

[gadogado]

hey thx @amithm7 - unfortunately this still breaks the intended and current functionality of #2 which is:

• Header should not have a visible vertical scrollbar nor should it be scrollable.

[amithm7]

@gadogado ,

Header has no scrollbar, it's parent element does. But I get what you mean.

Have fixed it. (This is no functionality though, just nitpicking :smiling_face_with_tear:)