How can I correctly resize all plotly plots encapsulated in a javascript tab?

Question

I am new to handling html objects from R and I am having an issue while trying to create html tabs from named lists (the target document is html pages obtained from RMarkdown). Long story short, while I am able to create the tabs that I want using htmltools and shiny tags, I can't manage to have all plotly plots correctly resized to their pane width. By this I mean that the first plot in the first pane (that is display by default at opening) is having the correct size as shown below :

Plotly plot correctly resized

While plots in others tabs appear shrunk:

Plotly plot in the second tab

I have been able to minimise the code required to reproduce my issue. I rely on the following project for creating the tabs : tabbis.js. It works by declaring tabs name in custom tags div data-tabs and panes content in custom tags div data-panes; then the script is handling everything.

Code to reproduce :

library(htmtools)
library(rlang)
library(plotly)

div_tabs <- function (..., .noWS = NULL, .renderHook = NULL)
{
  contents <- dots_list(...)
  tag("div data-tabs", contents, .noWS = .noWS, .renderHook = .renderHook)
}

div_panes <- function (..., .noWS = NULL, .renderHook = NULL)
{
  contents <- dots_list(...)
  tag("div data-panes", contents, .noWS = .noWS, .renderHook = .renderHook)
}

fig <- plot_ly(midwest, x = ~percollege, color = ~state, type = "box")
fig2 <- plot_ly(midwest, x = ~percollege, color = ~state, type = "box")
fig3 <- plot_ly(midwest, x = ~percollege, color = ~state, type = "box")

css <- readLines("https://raw.githubusercontent.com/paulthewalton/tabbisjs/main/assets/css/dist/style-default.min.css")

tabbis <- readLines("https://raw.githubusercontent.com/paulthewalton/tabbisjs/main/assets/js/dist/tabbis.es6.min.js")

T <- browsable(
  tagList(
    tags$html(
      tags$head(
        htmltools::tags$style(htmltools::HTML(css))
      ),
      tags$body(
        div_tabs(
          tags$button("Tab1"),
          tags$button("Tab2"),
          tags$button("Tab3")
        ),
        div_panes(
          tags$div(fig),
          tags$div(fig2),
          tags$div(fig3)
        )
      ),
      tags$script(htmltools::HTML(tabbis)),
      tags$script(htmltools::HTML("tabbis();"))
    )
  )
)
save_html(T,"error_tabbis.html")

To fix this I am trying to call a function as in A similar example using materializeR but with dygraph. But I have been unable to find the correct function for plotly (To be honest I don't fully understand the proposed fix)

I have done so by adding :

tags$script(
"
$(document).ready(function(){
  $('div data-tabs').on('click', function(evt) {
    console.log('resizing');
    HTMLWidgets.find('.pyplot').resize();
  })
});
")

at the end of the tagList.

If you have any tips or idea to handle this issue (or better way to have html panes in RMarkdown if any) I would truly appreciate it! Thanks for reading.