h-screen class causes page jump when using shadcn datatable pagination.

[braginteractive]

Just thought I would share an issue for anyone that might run into the same problem.

I am using the shadcn datatable and pagination.

In the root.tsx file, the parent div around the Outlet is using h-screen

	<div className="flex h-screen flex-col justify-between">

				<div className="flex-1">
					<Outlet />
				</div>

				<div className="container flex justify-between pb-5">
					<Logo />
					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
				</div>
			</div>

With the h-screen the Select component that is used in the datatable pagination doesnt work properly. When clicked, the page jumps to the top.

Removing the h-screen fixed the issue for me.

[andrecasal]

@braginteractive replace h-screen with min-h-screen instead.

In addition, for the pages that render inside the root's <Outlet />, I set the header and footer heights as CSS variables and determine that container's min-height like so: min-h-[calc(100vh-var(--header-height)-var(--footer-height))].

This ensures the minimum height of that container is your viewport's height - header height - footer height, ensuring your footer will always show correctly if the content is smaller than your viewport.

[kentcdodds]

I'm definitely open to a PR to fix this! Thanks for reporting :)

[damiensedgwick]

I think this issue can be closed as it appears it was fixed above but for whatever reason it was not automatically closed.