navset_pill_list poorly scales screen size because of grid layout

[corey-dawson]

The navset pill list (a vertical nav tab bar) currently uses the 12-point grid system to space the pills and the content across the screen width. This causes poor layouts and scaling based on screen size. For instance, the default width makes the navigation well panel 4/12ths of the screen (33%). This might be fine on an older monitor, however, on any new widescreen, this would make a navigation of list items take up far too much to the screen width [for a simple vertical list of nav objects]. The normal nav panels (that go across the width of the screen) dont scale height-wise when the screen is larger, so why would the vertical navigation tabset scale width wise? The current implementation creates a ton of wasted space. The function allows users to put in a tuple width (nav width, content width), where the total width has to equal 12. Even when updating this value, there will always be scaling issues

In addition, I want all my output content for each tab to take up the same height. please add a height argument into the navset_pill_list

Suggesting to change this widget to use a set width like the sidebar. However, more ideally would be use flexbot with display flex for the nav well and main content with flex values [to make this really solid, add min-width and max-width for the nav well]

Example of somewhat okay sizing for a small screen

same exact app on a standard widescreen monitor

app

from shiny import App, Inputs, Outputs, Session, reactive, render, ui

app_ui = ui.page_fluid(
    ui.navset_bar(
        ui.nav_panel(
            "Configuration",
            ui.navset_pill_list(  
                ui.nav_panel(
                    "Input Page A",
                    ui.div(
                        "Input A",
                        style="height: 90vh; background-color: green"
                    )
                ),
                ui.nav_panel("Input Page B", "Input B"),
                ui.nav_panel("Inputs Page C", "Input C"),
                id="tab",
            ) 
        ),
        ui.nav_panel(
            "Optimization",
            "Optimization Panel"
        ),
        title = "My App",
    )
)

def server(input: Inputs, output: Outputs, session: Session):
    print("do stuff")
    
app = App(app_ui, server)

Excellent way for better layout sizing

from shiny import App, Inputs, Outputs, Session, reactive, render, ui

app_ui = ui.page_fluid(
    ui.div( # row div
        ui.div( # vertical pill nav div
            "good size vertical nav tab container",
            style="flex: 1; min-width: 230px; max-width: 285px; background-color: gray; border-style: solid; text-align: center"
        ),
        ui.div( # pill content div
            "main content here",
            style="flex: 3; text-align: center"
        ),
        style="display: flex; flex-direction: row; height: 100vh; width: 100%;"
    )
)

def server(input: Inputs, output: Outputs, session: Session):
    print("do stuff")
    
app = App(app_ui, server)