I just had the same problem here!

Which browser are y'all using?

@abidlabs I tested this issue reproduced in all of these thee environments. It seems not browser-specific issue.

• Firefox: 129.0.2 (64-bit)
• Chrome Version 128.0.6613.120 (Official Build) (arm64)
• VSCode + Jupyter Extention

You're right, I can reproduce this, thanks @bilzard, we'll take a look at this!

This is definitely bad and wrong. Will fix when I tackle the data frame shortly.

I'm also having this issue after upgrading from 4.40.0 to 4.44.0, see also this playground link.

It seems to be this line that was added in the SSR update which causes this behaviour, commenting it out fixes it.

A temporary fix is setting max-height and min-height in css for the dataframe:

qa_pairs = gr.Dataframe(data, elem_classes="qa-pairs")

.qa-pairs .table-wrap {
    min-height: 170px;
    max-height: 170px;
}

Thanks @cornzz for isolating the issue. We'll fix this as soon as we can (if you'd like, you can open a PR)

the bug haven't been fixed yet.

Another manifestation of this bug is happening on this Space: https://huggingface.co/spaces/lhoestq/Common-Crawl-Pipeline-Creator

^ for the common crawl space I used @cornzz workaround for now

For me, the workaround doesn't work. It fixes a viewport for the table, but the table grows inside the viewport and we cannot see the end of the table. (radio 5.3.0
)

@abidlabs it seems to me another symptom of this bug (I happened to come across this as I'm working with Dataframe components today) is that the header row also changes size when scrolling, which doesn't seem to be something that should be intended.

I came across the bug on this issue, and by using the workaround described:

{
    min-height: 170px;
    max-height: 170px;
}

I was able to work fine. But the first row's height is also being increased and I'm not sure if this is FAD.

Repro code:

import gradio as gr

with gr.Blocks(
        css="#test_dataframe {min-height: 400px; max-height: 400px;}" # this is the workaround, working
) as demo:
    gr.Markdown("## Testing Dataframe ##")
    # Example dataset with 200 rows and 5 columns, each cell containing more than 200 characters
    example_data = [
        [
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " * 4,
            "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. " * 4,
            "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris " * 4,
            "Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in " * 4,
            "Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. " * 4
        ]
        for _ in range(200)
    ]
    documents_list = gr.DataFrame(
        value=example_data,
        headers=["Column 1", "Column 2", "Column 3", "Column 4", "Column 5"],
        elem_id="test_dataframe"
        #wrap=True,  # this just makes it 10x worse
    )
    gr.Button("Mock Button to a component after DataFrame")

demo.launch(debug=True)

this results in this test case:

In my real dataset it's much worse and more noticeable, because I also use wrap = True here:

I've encountered a similar problem to what's described in #9288, but with an additional behavior: when the horizontal scrollbar is positioned at the far right and I scroll upward, the dataframe shrinks vertically, eventually flattening completely. This was observed while developing on Linux Mint 22.04 with the latest version of Chrome at this time, using both gradioand pythonCLI on my app.py with the gr.Dataframe component. It seems to further support the notion that this issue is not browser-specific, as it replicates across different environments.