Update @render.data_frame renderer to work properly with fill/fillable

[cpsievert]

Closes #1118

[jcheng5]

Overall this looks great! Only regressing case I could find is height="auto" in a non-fill context. There's a ton of extra space now that wasn't there before.

import seaborn as sns

from shiny.express import render, ui

df = sns.load_dataset("iris").iloc[:5,]

@render.data_frame
def data_frame():
    return render.DataGrid(
        df,
        height="auto",
    )

with ui.p():
    "Hello"

[jcheng5]

I also noticed that even on main, output_data_frame always makes the outermost element fill/fillable, which I don't think is correct if height="auto" is passed. Like if you take the example from my previous comment, and wrap all the UI in a ui.card(height="800px").

[cpsievert]

I don't love the centering. Do we do that anywhere else?

Agreed (and I don't think so) in general, but it's maybe worth doing inside a card? 87daed7 restricts it to just a .card-body context, but I can probably be talked into not doing that.

There's a ton of extra space now that wasn't there before.

Oops, that's cause of the flex-basis I added last minute without fully thinking it through. 87daed7 reverts that.

I also noticed that even on main, output_data_frame always makes the outermost element fill/fillable

I don't think this is a problem, at least for the situation you're thinking of. It could be a problem though if the children of that element are for some reason not compatible with a display:flex; flex-direction:column layout.

Just to illustrate, here's the example you have in mind, with the result (which seems right):

import seaborn as sns

from shiny.express import render, ui

df = sns.load_dataset("iris").iloc[:5,]

with ui.card(height="400px"):
    @render.data_frame
    def data_frame():
        return render.DataGrid(df, height="auto")

with ui.p():
    "Hello"

[jcheng5]

I actually meant this:

import seaborn as sns

from shiny.express import render, ui

df = sns.load_dataset("iris").iloc[:5,]

with ui.card(height="400px"):
    @render.data_frame
    def data_frame():
        return render.DataGrid(df, height="auto")

    with ui.p():
        "Hello"

If you drop the fill classes from the ui.output_data_frame's outermost element, you get this instead (which I think is better):

[jcheng5]

We can merge without that fix though, if you don't think there's anything we can do about it right now.

[cpsievert]

Ah, good point. 789147c addresses that.

[jcheng5]

Oh, interesting approach! Great.

Still feels weird to me that it's centered, but like you, I could be talked into it. Have you run this by Garrick or Greg?

[cpsievert]

@gregswinehart "loves it" :)

[jcheng5]

OK, I'm happy to be overruled!