Table row height using a combination of bslib, wellPanel, and rhandsontable

[pomchip]

Hi,

I am using rhandsontable to display/edit some data in a Shiny app. I recently updated my app to use bslib and observed an issue with row height in a particular set of circumstances:

• use of bslib theme with bootstrap version 5
• display of an rhandsontable inside a wellPanel
• one of the column of the rhandsontable is "hidden" by assigning it a negligible width

As you can see in the reprex below, the row height is much larger than necessary in table shown inside the wellPanel but is OK in the table shown outside. Using a bootstrap version 3 theme, the rows are shown with proper height. Similarly, the rows have a regular height when no particular width value is assigned the colA column.

My quandary is that I need to display my tables inside a wellPanel (or equivalent) and I'd like to use bootstrap version 5 for functionality in other parts of my app.

Are you aware of a solution for this problem? Is there a bslib equivalent of wellPanel with would circumvent this issue? Alternatively, is there a css workaround?

I've spent hours on isolating the issue and trying to tweak my app css but could not find a solution. Any help would be greatly appreciated?

library(shiny)
library(bslib)
library(rhandsontable)

ui <- page_fillable(
  theme = bslib::bs_theme(bootswatch = "sandstone", version = 5),
  page_fillable(
    fluidRow( uiOutput("HT") ),
    wellPanel( fluidRow( uiOutput("HT2") ) )
  )
)

server <- function(input, output) {
  
  values <- reactiveValues()
  values2 <- reactiveValues()
  
  data <- reactive({
    if (!is.null(input$hot)) {
      DF <- hot_to_r(input$hot)
    } else {
      if (is.null(values[["DF"]])){
        DF <- data.frame( ColA = c('AAA', 'BBB', 'CCC'), ColB = c('DDD', 'EEE', 'FFF') )
      } else {
        DF <- values[["DF"]]
      }
    }
    values[["DF"]] <- DF
    DF
  })
  
  data2 <- reactive({
    if (!is.null(input$hot2)) {
      DF2 <- hot_to_r(input$hot2)
    } else {
      if (is.null(values2[["DF2"]])){
        DF2 <- data.frame( ColA = c('AAA', 'BBB', 'CCC'), ColB = c('DDD', 'EEE', 'FFF') )
      } else {
        DF2 <- values2[["DF2"]]
      }
    }
    values2[["DF2"]] <- DF2
    DF2
  })
  
  output$hot <- renderRHandsontable({
    DF <- data()
    if (!is.null(DF))
      rhandsontable( DF ) %>%
      hot_col( col = 'ColA', colWidths = 0.1 )
  })
  
  output$HT <- renderUI({
    rHandsontableOutput("hot")
  })
  
  output$hot2 <- renderRHandsontable({
    DF2 <- data2()
    if (!is.null(DF2))
      rhandsontable( DF2 ) #%>%
      #hot_col( col = 'ColA', colWidths = 0.1 )
  })
  
  output$HT2 <- renderUI({
    rHandsontableOutput("hot2")
  })
  
}

shinyApp(ui = ui, server = server)

[pomchip]

Adding this css provided a workaround:
".handsontable th, .handsontable td { white-space: nowrap ! }"