Bootstrap 3 - Como maximizar a largura de entrada dentro da barra de navegação

Agora eu tenho uma barra de navegação que se parece com:http://bootply.com/78239

Quero maximizar a largura da entrada de texto de "pesquisa", sem criar quebras de linha (ou seja, que o link "Limpar" seja restrito ao link "Sobre").

Eu só tenho experiência básica com CSS e web design. Eu li algo sobre "overflow: hidden"truques, mas não entendo como usá-lo quando há mais elementos à direita do elemento de segmentação.

obrigado

EDITAR:

Uma solução parcial pode ser definir a largura "manualmente" para cada caso, como emhttp://bootply.com/78247 :

@media (max-width: 767px) {
  #searchbar > .navbar-form {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #searchbar > .navbar-form {
    width: 205px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #searchbar > .navbar-form {
    width: 425px;
  }
}

@media (min-width: 1200px) {
  #searchbar > .navbar-form {
    width: 625px;
  }
}

mas essa solução não funcionará quando os textos do menu forem "dinâmicos" (por exemplo, conter "Hello username").

Eu suponho que não é um grande problema se você assumir que há um limite nas larguras dos textos do menu - é simplesmente irritante calcular / testar essas larguras manualmente. Estou apenas curioso para saber se existe uma maneira legal de fazer isso automaticamente.