Manually adjusting header height corrupts resposiveness

[Pablo Rodriguez]

(This is in fact a feature request: add an "height" attribute to dashboardHeader())

I used this solution in order to adjust height of a dashboardHeader() in shinydashboard.
My problem comes when I try to see different viewports.
In a normal monitor display, the new header height doesn't cover neither the sidebar nor the body of the page.
But using a mobile viewport, both are covered.

This is the code I'm using:

    library(shiny) 
library(shinydashboard)
    

    ui <- dashboardPage(
   dashboardHeader(
        # Set height of dashboardHeader
        tags$li(class = "dropdown",
                tags$style(".main-header {max-height: 200px}"),
                tags$style(".main-header .logo {height: 200px;}"),
                tags$style(".sidebar-toggle {height: 200px; padding-top: 1px !important;}"),
                tags$style(".navbar {min-height:200px !important}")
        )    ),   
dashboardSidebar(
        # Adjust the sidebar
        tags$style(".left-side, .main-sidebar {padding-top: 200px}"),
        selectInput(inputId="1", label = "Label1", choices = "variable", "Variable:"),
        selectInput(inputId="2", label = "Label2", choices = "variable", "Variable:")   ),   
dashboardBody(
        fluidRow(
          tabBox(width =12, 
                 tabPanel("Tab1", "First tab content"),
                 tabPanel("Tab2", "Tab content 2"))
        )   ) )
    
    server <- function(input, output){}
    
    shinyApp(ui, server)

This is a monitor display:

And this would be in a mobile viewport:

As you can see, both top of sidebar and body are hidden behind the new header height

Is there any way we can adjust the header's height without breaking the app responsiveness?