How to use a compact view for bslib::value_box()?

I'm using bslib::value_box() in a Quarto Dashboard.

At 90% zoom, they look fine:

But at 100% zoom, it is split into 2 rows:

Is there a way for the value boxes to always be 1 row? I don't know if this is a bslib issue or a quarto issue or just some CSS I need to mess with. Hope someone can give some tips.

---
title: "Test"
format: dashboard
---

# Page 1

## Sidebar {.sidebar}

## Column
### Row {height="200px"}

```{r}
library(bslib)
library(bsicons)

value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff"))
value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff"))
value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff"))
value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff"))
value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))

```

Solution

First notice that what you are seeing there is not an issue in bslib, it is intentional behavior for a small value_box. In particular, the default showcase_layout is left center and what you are seeing at 100% zoom is left (area) and center (showcase).

That said, a possibility for deactivating this is that you set the sass variable $bslib-value-box-horizontal-break-point to say 1px using bslib::bs_add_variables. It is otherwise set to 300px.

The following minimal shiny app is based on your code and the below screenshots show the effect of setting the variable. You can translate this similarly to your dashboard.

library(shiny)
library(bslib)
library(bsicons)

ui <- page_fluid(
  theme = bslib::bs_theme() |>
    bs_add_variables("bslib-value-box-horizontal-break-point" = "1px"),
  layout_column_wrap(
    value_box("Box 1", value =  123, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 2", value =  456, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 3", value =  789, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 4", value = 1011, showcase = bs_icon("rocket-takeoff")),
    value_box("Box 5", value = 1213, showcase = bs_icon("rocket-takeoff"))
  )
)

shinyApp(ui, \(...) {})

With standard value 300px:

With value set to 1px: