I am using value boxes with long titles. The default behaviour is that the titles would wrap in smaller screen sizes. That does not look professional:

So, I use the white-space: nowrap; css property to keep the titles intact. But that cuts them off:

I notice that at screen sizes of medium or less (bootstrap breakpoints), the value boxes are rearranged on multiple rows:

I want to do the same but at a breakpoint of large screen size. Where can I make that change?

Code Example

library(shiny)
library(bslib)

ui <- page_navbar(
  header = tags$style(HTML("
        .bslib-value-box .value-box-title {
    font-size: 1.1rem;
    color: #000000;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
    ")),
  sidebar = sidebar(),
  nav_panel(
    title = "Value Boxes",
    layout_columns(
      value_box(title = "Openness", value = 50),
      value_box(title = "Conscientiousness", value = 50),
      value_box(title = "Extroversion", value = 50),
      value_box(title = "Agreeableness", value = 50),
      value_box(title = "Neuroticism", value = 50)
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)