Shiny Module app displays tabpanel outside the box layout. Need to resize the tabpanel

Question

I have a shiny app where the tabpanel ('Drug') is showing outside the box layout. I am using shiny modules to modularize my code. The Drug section has a module of it's own and there is a main module that is a container for submodules. The UI section of both Drug History and the Main modules are shown below. Before modularizing the code, the tabpanel was displaying fine within the box.

# Drug History Module - UI -----------------------------------------------

drug_history_UI <- function(id) {
  ns <- NS(id)
  tabPanel("Drug",
           tabsetPanel(
             type = "pills",
             tabPanel(title = "Previously Diagnosed",
                      tabsetPanel(
                        type = "pills",
                        tabPanel(
                          "Prior to Index Date",
                          shinyWidgets::pickerInput(
                            inputId = ns("drug_class_selection_prev"),
                            label = "Drug Class:",
                            choices = c("ATC 1st", "ATC 2nd", "ATC 3rd", "ATC 4th", "ATC 5th", "Ingredient"),
                            selected = c("Ingredient"),
                            width = "50%"
                          ),
                          fluidRow(column(5,DT::dataTableOutput(ns("truven_prev_med_history_drug_table"))),
                                   column(7,actionButton(ns("resetSelection_drug_tbl_prev"), label = "Click to reset row selection" ,class = "btn-light"),
                                          plotlyOutput(ns("drug_bar_distr_plot_prev"),height = 600),
                                          plotlyOutput(ns("drug_cleveland_plot_prev"), height = 600)),
                                   column(12,htmlOutput(ns("count_pat_w_comb_trt_prev")))
                          )
                        )
                        ,
                        tabPanel("During Index Date",
                                 fluidRow(
                                   column(5,DT::dataTableOutput(ns("truven_prev_med_history_drug_era_table"))),
                                   column(7,actionButton(ns("resetSelection_drug_era_tbl_prev"), label = "Click to reset row selection" ,class = "btn-light"),
                                          plotlyOutput(ns("drug_era_bar_distr_plot_prev"),height = 600),
                                          plotlyOutput(ns("drug_era_cleveland_plot_prev"), height = 600)),
                                   column(12, htmlOutput(ns("count_pat_w_comb_trt_drug_era_prev")))
                                 )
                                 )
                      )),
             tabPanel(title = "Newly Diagnosed",
                      tabsetPanel(
                        type = "pills",
                        tabPanel(
                          "Prior to Index Date",
                          shinyWidgets::pickerInput(
                            inputId = ns("drug_class_selection_new"),
                            label = "Drug Class:",
                            choices = c("ATC 1st", "ATC 2nd", "ATC 3rd", "ATC 4th", "ATC 5th", "Ingredient"),
                            selected = c("Ingredient"),
                            width = "50%"
                          ),
                          fluidRow(column(5,DT::dataTableOutput(ns("truven_new_med_history_drug_table"))),
                                   column(7,actionButton(ns("resetSelection_drug_tbl_new"), label = "Click to reset row selection" ,class = "btn-light"),
                                          plotlyOutput(ns("drug_bar_distr_plot_new"),height = 600),
                                          plotlyOutput(ns("drug_cleveland_plot_new"), height = 600)),
                                   column(12,htmlOutput(ns("count_pat_w_comb_trt_new")))
                          )
                        )
                        ,
                        tabPanel("During Index Date",
                                 fluidRow(
                                   column(5,DT::dataTableOutput(ns("truven_new_med_history_drug_era_table"))),
                                   column(7,actionButton(ns("resetSelection_drug_era_tbl_new"), label = "Click to reset row selection" ,class = "btn-light"),
                                          plotlyOutput(ns("drug_era_bar_distr_plot_new"),height = 600),
                                          plotlyOutput(ns("drug_era_cleveland_plot_new"), height = 600)),
                                   column(12, htmlOutput(ns("count_pat_w_comb_trt_drug_era_new")))
                                 )
                                 )
                      ))
           ))
  
}

Master module

medical_history_UI <- function(id) {
  ns <- NS(id)
  fluidRow(
  box(
    h3("Previously Diagnosed Patients", align = "center"),
    h4(textOutput(ns("mh_prev_truven_total_projected")), align = "center"),
    h4(textOutput(ns("mh_prev_truven_total_observed")), align = "center"),
    width = 6
  ),
  box(
    h3("Newly Diagnosed Patients", align = "center"),
    h4(textOutput(ns("mh_inc_truven_total_projected")), align = "center"),
    h4(textOutput(ns("mh_inc_truven_total_observed")), align = "center"),
    width = 6
  ),
  astellasTabsetPanel(
    type = "pills",
    id = "med_history",
    # Drug Panel
    drug_history_UI(ns("drug_history")),
    # Condition Panel
    condition_UI(ns("condition_history")),
    # Procedure Panel
    procedure_UI(ns("procedure_history")),
    # Charlson Comorbidity Panel
    CCI_UI(ns("CCI")),
    tags$head(
      tags$script(
        '
                                var dimension = [0, 0];
                                $(document).on("shiny:connected", function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                                $(window).resize(function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                            '
      )
    )
  ))
}

Answer 1

Adding the fluidpage() and fluidrow() in the master module got the tabs to align.

medical_history_UI <- function(id) {
  ns <- NS(id)
  fluidPage(
  fluidRow(
  box(
    h3("Previously Diagnosed Patients", align = "center"),
    h4(textOutput(ns("mh_prev_truven_total_projected")), align = "center"),
    h4(textOutput(ns("mh_prev_truven_total_observed")), align = "center"),
    width = 6
  ),
  box(
    h3("Newly Diagnosed Patients", align = "center"),
    h4(textOutput(ns("mh_inc_truven_total_projected")), align = "center"),
    h4(textOutput(ns("mh_inc_truven_total_observed")), align = "center"),
    width = 6
  ),
  astellasTabsetPanel(
    type = "pills",
    id = "med_history",
    # Drug Panel
    drug_history_UI(ns("drug_history")),
    # Condition Panel
    condition_UI(ns("condition_history")),
    # Procedure Panel
    procedure_UI(ns("procedure_history")),
    # Charlson Comorbidity Panel
    CCI_UI(ns("CCI")),
    tags$head(
      tags$script(
        '
                                var dimension = [0, 0];
                                $(document).on("shiny:connected", function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                                $(window).resize(function(e) {
                                    dimension[0] = window.innerWidth;
                                    dimension[1] = window.innerHeight;
                                    Shiny.onInputChange("dimension", dimension);
                                });
                            '
      )
    )
  )))
}