Input select has different margin-bottom if in panel_conditional when in cards

[tnederlof]

I noticed some weird spacing issues in an app I am developing (my inputs are all in cards).

It looks like my inputs that are not in any ui.panel_conditional have a margin-bottom: 0 from this CSS entry:

.bslib-gap-spacing>.bslib-mb-spacing, .bslib-gap-spacing>.form-group, .bslib-gap-spacing>p, .bslib-gap-spacing>pre {
    margin-bottom: 0;
}

However, inputs that are in a ui.panel_conditional have a margin-bottom: 1rem from this CSS entry:

.form-group {
    margin-bottom: 1rem;
}

As far as I can tell this happens on other inputs as well. It creates weird spacing when trying to use inputs one after another with some in conditionals and some not in conditionals.

I recreated a simple example here

[gadenbuie]

Thanks @tnederlof! It turns out this is the result of two issues:

• .bslib-gap-spacing should account for .shiny-panel-conditional rstudio/bslib#1030 would fix the margin-bottom discrepancy
• But ui.panel_conditional() is missing the shiny-panel-conditional class #1256 is needed for the fix to work in py-shiny

[gadenbuie]

Here's another example, modified from @tnederlof's example, that shows the issue:

App Code

from shiny import App, render, ui

app_ui = ui.page_fillable(
    ui.layout_columns(
        ui.card(
            ui.input_checkbox("checkbox", "Checkbox", True),
            ui.input_select(  
                "select",  
                "Select an option below:",  
                {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},  
            ),
            ui.p("Some text here.")
        ),
        ui.card(
            ui.input_checkbox("checkbox2", "Checkbox", True),
            ui.panel_conditional("input.checkbox",
                ui.input_select(  
                    "select2",  
                    "Select an option below:",  
                    {"1A": "Choice 1A", "1B": "Choice 1B", "1C": "Choice 1C"},  
                ),
            ),
            ui.p("Some text here.")
        ),
    ),
)

def server(input, output, session):
    pass

app = App(app_ui, server)

[gadenbuie]

This example also points out that ui.card() doesn't have a fillable argument, which could have been set to fillable=False in this case. Or ui.card_body() could be exported so that fillability can be disabled internally at the body level with ui.card(ui.card_body(..., fillable=False)).

Related #1128

[tnederlof]

Ah very interesting, thanks for checking!