How to make the shinyWidgets::radioGroupButtons responsive to small screen sizes?

Question

The modal in this shiny app is responsive but the shinyWidgets::radioGroupButtons are not:

How can I make the shinyWidgets::radioGroupButtons adjust to the size of the screen?

Code

library(shiny)
library(shinyWidgets)
library(bslib)

# Functions-------
radio_inv <- function(id, label, width = "100%", ...) {
  shinyWidgets::radioGroupButtons(
    inputId = id,
    size = "sm",
    label = HTML("<h4>", label, "<span style='color:red'>*</span>", "</h4>"),
    choices = c(
      "Strongly Disagree",
      "Somewhat Disagree",
      "Disagree",
      "Agree",
      "Somewhat Agree",
      "Strongly Agree"
    ),
    selected = character(0),
    # justified = TRUE,
    checkIcon = list(
      yes = icon("ok",
                 lib = "glyphicon"
      )
    ),
    width = width,
    justified = TRUE, #### NEW
    ...
  )
}



# App ------------------------
ui <- bslib::page_fluid(
  tagList(

    # Button to start the questionnaire
    actionButton("start_intake",
                 label = "Start")
  ),
  theme = bs_theme(version = 5,
                   preset = "shiny")
)

server <- function(input, output, session) {
  observeEvent(input$start_intake, {

    survey_qs <- div(
      radio_inv("inv1", "I like sushi."),
      br(),
      br(),
      radio_inv("inv2", "I hate cake.")
    )

    page1 <- modalDialog(
      title = "Survey",
      survey_qs,
      footer = tagList(
        actionButton("submit",
                     label = "Next",
                     class = "okay",
        )
      )
    )

    showModal(page1)
  })
}

shinyApp(ui, server)

Answer 1

The value may need some adjustment, but adding this css to the ui definitely improves it:

tags$head(tags$style(HTML('
    .btn-outline-primary {
      font-size: 2vw;
    }')))

See https://www.w3schools.com/howto/howto_css_responsive_text.asp for more info