reactable affects height of all cards containing reactable in quarto dashboard

[wvictor14]

I suspect this has something to do with css / html which my knowledge is quite rudimentary. I also am not sure if this would be more appropriate to ask in quarto or somewhere else e.g. for html/css specific advice. Let me know if this is not appropriate to ask for help here!

Description of the problem:

I expect that in quarto documents, a reactable with expandable rows in card 1 will control card 1's height when rows are expanded. However, I noticed if I have another card (call it card 2) with another reactable,  then it's height will also expand, even though it is a distinct reactable.

Here is a MRE:

---
title: "test"
format: 
  dashboard:
    scrolling: true
editor_options: 
  chunk_output_type: console
---

## Row 

```{r}
library(reactable)
library(dplyr)
library(htmltools)
data <- unique(CO2[, c("Plant", "Type")])

make_rt <- function(x, ...) {
  reactable(
    x,
    details = function(index) {
      plant_data <- CO2[CO2$Plant == data$Plant[index], ] |> 
        slice(1:2)
      htmltools::div(style = "padding: 1rem",
                     reactable(plant_data, outlined = TRUE)
      )
    },
    ...
  )
}

data |>  slice(1:3) |>   make_rt(class = 'table-1')
```


## Row

```{r}
data |>  slice(3:6) |>   make_rt(class = 'table-2')
```

collapsed rows:

Expanding rows in reactable 1 increase both card 1 and card 2 height

But I don't want card 2 to expand when card 1 reactable is interacted with obviously.

[glin]

Hi, I'm not real familiar with Quarto dashboards, but just looking at the CSS of the cards, it looks like it's just how the cards work. They're styled so each card always has the same height. I'm not sure if this can be changed or if there's an alternate way to do cards, but it'd probably be a better question for someone more familiar with Quarto dashboards.