Drop down lists in select_group for small screens

[filipwastberg]

When looking at the app below on a small screen with zoom in the browser the input-boxes from select_group_ui expands upwards and "hides" the results. This makes it impossible to select choices in the top of the list.

I think it would make sense to always expand the dropdown downwards. I didn't register this because I'm pretty much always on a large screen, but many organizations are using small laptopts with browsers where the default is 150% zoom.

I'm sure I can fix this by manipulating the css but thought I would register it here anyways.

library(shiny)
library(datamods)
library(shinyWidgets)

myModuleUI <- function(id){
  ns <- NS(id) 
  fluidRow(
    column(
      width = 10, offset = 1,
      tags$h3("Filter data with select group module"),
      shinyWidgets::panel(
        select_group_ui(
          id = ns("my-filters"),
          params = list(
            Manufacturer = list(inputId = "Manufacturer", label = "Manufacturer:"),
            Type = list(inputId = "Type", label = "Type:"),
            AirBags = list(inputId = "AirBags", label = "AirBags:"),
            DriveTrain = list(inputId = "DriveTrain", label = "DriveTrain:")
          )
        ),
        status = "primary"
      ),
      reactable::reactableOutput(outputId = ns("table"))
    )
  )
}
myModuleServer <- function(id){
  moduleServer(id, function(input, output, session){
    res_mod <- select_group_server(
      id = "my-filters",
      data_r  = reactive(MASS::Cars93),
      vars_r  = reactive(c("Manufacturer", "Type", "AirBags", "DriveTrain"))
    )
    output$table <- reactable::renderReactable({
      reactable::reactable(res_mod())
    })
  })
  
}

ui <- fluidPage(
  # theme = bslib::bs_theme(version = 5L),
  myModuleUI("change")
)

server <- function(input, output, session) {
  myModuleServer("change")
}
shinyApp(ui, server)