Using Inertia + React and for some reason the HTML size is bigger than the react components

So this one is tough to explain and I've been pulling my hair for hours trying to figure out what exactly is going on. Usually when setting a element size to h-screen and w-screen (which I have done with my Page Layout) there is no scrollbar. But in my case there is always a vertical scrollbar for some reason. Upon inspection the HTML element seems to be around 8px taller than any jsx/tsx file's maximum size. I tried setting margin 0 and padding 0 directly in the html's inline style in the app.blade.php entry point but it's still somehow taller than any javascript container no matter how I style it.

This introduces 2 issues for me :

1. I'm using dark/light theme switching with theme context provider and the chosen theme is getting saved in local storage. That's all fine and good but since the app.blade.php does not have access to the app.css file (as it's being injected in the app.tsx which acts as a child of the app.blade.php) so my background color does not apply to the entire document. Even if app.blade.php could access that css file it (I think) wouldn't switch the background dynamically as it's serverside rendered.

2. The obvious issue of always having a scroll bar even when I don't need one. I know I can use overflow-y-none to disable it but given the fact that I was trying to make a Layout Wrapper, this isn't a great option cuz in some pages I would need scrolling.

I've tried completely getting rid of the layout file and just having a simple div with h-screen w-screen tailwind classes and the issue still persists. I don't understand why the HTML file is taller than the JSX files.

edit: For context the HTML's height is always 8px larger than any inertia children.