How do I make sure that the labels of a echarts4r radar chart are completely visible on any screen? Works with bs4Dash::box but not with bslib::card

Question

I am creating a radar chart via echarts4r package in a shiny app. On small screens, the labels of the radar chart cut off. How do I make sure that the labels are completely visible on any screen? I understand that any solution for this would mean that the radar chart size decreases to accommodate the labels.

Example code:

library(shiny)
library(echarts4r)

ui <- fluidPage(
  tagList(
    echarts4rOutput("radar_chart")
  )
)

server <- function(input, output, session) {
  output$radar_chart <- renderEcharts4r({
    df <- data.frame(
      x = c("Loooong", "Verrrrry long", "Extreeeeeeeeemely long", "Short", "Min"),
      y = runif(5, 1, 5),
      z = runif(5, 3, 7)
    )
    
    df |>
      e_charts(x) |>
      e_radar(y, max = 7) |>
      e_radar(z) |>
      e_tooltip(trigger = "item") |>
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18
        ))
    })
}

shinyApp(ui, server)

bs4Dash example (radar chart labels are visible on any screen size)

In this example of bs4Dash, when the radar chart is wrapped in box, the size is adjusted:

library(shiny)
library(bs4Dash)
library(echarts4r)
library(data.table)
library(dplyr)


df = data.frame(name=c('A','B','C'),
                color = c('blue','white','green'),
                atr1 = c(34,45,32),
                atr2 = c(56,32,21),
                atr3 = c(23,45,21))

# UI

ui = dashboardPage(
  title = "Example radar plot",
  header = dashboardHeader(
    title = dashboardBrand(
      title = "radarchart test",
      color = "primary"
    )),
  
  sidebar = dashboardSidebar(
    selectizeInput('sel1','name',choices = NULL),
    selectizeInput('sel2','color',choices = NULL)
  ),
  body = dashboardBody(
    box(echarts4rOutput("radar"))
  )
)

# SERVER

server = function(input, output, session) {
  
  #Filter update
  updateSelectizeInput(session, 'sel1', choices = sort(unique(df$name)),selected = "A" ,server = TRUE)
  
  observeEvent(input$sel1, {
    updateSelectInput(session, inputId = "sel2", label="color",
                      choices = df[df$name==input$sel1,]$color)
  })
  
  #Table creation to use in radarplot
  dataradar = reactive({
    dataradar = df[df$name==input$sel1 & df$color == input$sel2, c('atr1','atr2','atr3')]
    dataradar = data.table(dataradar)
    dataradar = melt(dataradar, measure.vars = c(names(dataradar))) 
  })
  
  
  #radar plot
  output$radar <- renderEcharts4r({
    if(!nrow(dataradar()))
      return()
    
    dataradar() %>%
      e_charts(variable)  %>%
      e_radar(value) |> 
      e_radar_opts(
        axisName = list(
          color = "black",
          fontFamily = "Libre Franklin",
          fontSize = 18
        ))
  })
  
}

shinyApp(ui,server)

I tried using bslib::card (in place of box in the original example code), but that does not adjust the size of radar chart on small screen size as box did. Any ideas how can I mimic the same behaviour?