How to display a shinyWidgets Input inline inside a Quarto dashboard card?

Using Quarto Dashboard with a shiny server, when I put a shinyWidget into a toolbar and I have 2 sub-pages, it seems to be contained to the far right. Could you please let me know what to do in order to expand the area the widget takes up so that the radio button actually is inline?

---
title: "Untitled"
format: dashboard
server: shiny
---

```{r}
#| context: setup
library(shinyWidgets)

```

# Page1

```{r}
#| label: toolbarExample1
#| content: card-toolbar

prettyRadioButtons(
   inputId = "Id039",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
    bigger = TRUE,
   inline = TRUE,
   status = "info",
   animation = "jelly",
   width = "100%"
)


```

```{r}
#| label: tolbarCard1
#| title: "Shiny Widget not Expanding1"

"test"
```

# Page2

```{r}
#| label: toolbarExample2
#| content: card-toolbar

prettyRadioButtons(
   inputId = "Id040",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
    bigger = TRUE,
   inline = TRUE,
   status = "info",
   animation = "jelly",
   width = "100%"
)


```

```{r}
#| label: tolbarCard2
#| title: "Shiny Widget not Expanding2"

"test"
```

```{r}
#| label: serverSide
#| context: server

```

I assume there is a setting I am missing, but I don't know where to start in this case.

Also, if this is a bug and I wanted to report it, is it on the part of Quarto or shinyWidgets?

shinyWidgets and its dependencies have to be loaded properly, what can be set using context:setup inside the loading chunk (and was not contained inside the original post):

```{r}
#| context: setup
#| include: false
library(shinyWidgets)
```

The other issue is that there are some style conflicts regarding the radio buttons because of filling layouts which get inherited from overlying components. They can be solved by removing the html-fill-item and html-fill-container class from the button element and all of its children:

$(".shiny-input-radiogroup, .shiny-input-radiogroup > *")
  .removeClass("html-fill-item html-fill-container");

And then the radio buttons render inline as expected:

---
title: "Untitled"
format: dashboard
server: shiny
include-before-body:
  text: |
    <script>
      $(document).on("shiny:connected", function() {
        $(".shiny-input-radiogroup, .shiny-input-radiogroup > *")
          .removeClass("html-fill-item html-fill-container");
      });
    </script>
---

```{r}
#| context: setup
library(shinyWidgets)
```

# Page1

```{r}
#| label: toolbarExample1
#| content: card-toolbar

prettyRadioButtons(
   inputId = "Id039",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
    bigger = TRUE,
   inline = TRUE,
   status = "info",
   animation = "jelly",
   width = "100%"
)
```

```{r}
#| label: tolbarCard1
#| title: "Shiny Widget now Expanding1"

"test"
```

# Page2

```{r}
#| label: toolbarExample2
#| content: card-toolbar

prettyRadioButtons(
   inputId = "Id040",
   label = "Choose:", 
    choices = c("Click me !", "Me !", "Or me !"),
    bigger = TRUE,
   inline = TRUE,
   status = "info",
   animation = "jelly",
   width = "100%"
)


```

```{r}
#| label: tolbarCard2
#| title: "Shiny Widget now Expanding2"

"test"
```

```{r}
#| label: serverSide
#| context: server

```