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 :)