Adjust height of the whole header bar in dashboardHeader in shiny dashboard with wraping

Question

I used the answer to Adjust height of the whole header bar in dashboardHeader in shiny dashboard to make my dashboardHeader smaller. When I make the browser window smaller then the header gets wrapped but the "Test"-output is not adapted.

I added a tags$style(".content-wrapper {padding-top: 12px}") into dashboardBody which give more space, but I either would like to have no wrap of the header or the position of the output adapted.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(
  # Set height of dashboardHeader
    tags$li(class = "dropdown",
            tags$style(".main-header {max-height: 20px}"),
            tags$style(".main-header .logo {height: 20px;}"),
            tags$style(".sidebar-toggle {height: 20px; padding-top: 1px !important;}"),
            tags$style(".navbar {min-height:20px !important}")
           )
  ),
  dashboardSidebar(
     # Adjust the sidebar
     tags$style(".left-side, .main-sidebar {padding-top: 20px}")
  ),
  dashboardBody(
    tags$style(".content-wrapper {padding-top: 12px}"),   
    verbatimTextOutput('test')
  )
)

server <- function(input, output){
    output$test <- renderText('Test')
}

shinyApp(ui, server)

Answer 1

I believe you could achieve what you want by replacing the max-height in the first style-tag with min-height , ie:

...
tags$style(".main-header {min-height: 20px}"),
...