Shiny app with logo and title, when the title is too long it goes to next line overlapping the window content

I added logo and title in a shiny app following some code from here.

When the title is too long, the display is not good when the width of the screen is small, for example in phone view. Part of the text goes to the next line overlapping what is below. How can this be solved? I thought as possible solutions:

eliminating the logo when the width is small, to allow for more space for the text
make the box where the text is higher when the width is small, and push everything else down
force the text in a single line by automatically reducing font size

For all this I would need to find somewhere what is the width of the window at that moment and set parameters according to that, but I don't know how to find that width.

Some code that shows this issue:

library(shiny)
library(shinydashboard)

ui <- fluidPage(

tags$head(tags$style(
HTML('.b {font-weight:bold; padding-left:20px}

     .main-header {max-height:74px; background-color:#27355B; height:110%; position:absolute; width:100%}
     .main-header a {color:#fff; font-size:auto}

     .skin-blue .main-header .logo {background-color:#27355B; font-size:auto; display:contents; font-weight:bold;}

     .skin-blue .main-header .navbar  {background-color:#CF114E; float:right; position:relative; margin-left:0px; width:2%}'
))),


dashboardPage(    

dashboardHeader(
  title = tags$a(tags$img(src="logo.png", width = 250), tags$b('Long title that goes into next line in phone view'))
),


dashboardSidebar(width=250), 

dashboardBody( ) 

  ) 
    ) 

server <- shinyServer(function(input, output) {})

shinyApp(ui = ui, server = server)

Solution

Defining min and max height in the header and setting position as relative solved my problem. Also setting the left margin of the text in the title the same width as the logo, so the text won't overlap the logo in phone view.

library(shiny)
library(shinydashboard)


ui <- fluidPage(


  tags$head(tags$style(
    HTML('

         h3 {margin-top:-60px; margin-left:250px}

         .main-header {background-color:#27355B;  max-height:130px; width:100%; min-height:74px;
                       margin-botton:10px; padding-botton:10px; position:relative}

         .skin-blue .main-header .logo {background-color:#27355B; font-size:auto; display:contents; font-weight:bold;}

         .skin-blue .main-header .navbar  {background-color:#CF114E; float:right; position:relative; margin-left:0px; width:2%}

         '
    ))),



  dashboardPage(

    dashboardHeader(
      title = span(img(src="logo.png", width = 250),
                   h3('Long title that goes into next line in phone view')) 


    ),




    dashboardSidebar(width=250), 

    dashboardBody( ) 

  ) 
    ) 

server <- shinyServer(function(input, output) { } )

shinyApp(ui = ui, server = server)