projectblacklight/blacklight — pull request #677 by jrochkind (2014-01-09 17:30:30+00:00)
Title: make search button label sr-only at small size

At phone-sized screens, there isn't a lot of room for the actual search text input:

![searchbar-crowded](https://f.cloud.github.com/assets/149304/1880057/0da6397a-7953-11e3-892b-ec79402d6f64.png)

One improvement is to hide the label 'search' at small sizes:

![searchbar-collapsed](https://f.cloud.github.com/assets/149304/1880062/1a4e890c-7953-11e3-95e7-35345fbbf6b0.png)

I have done this by using the styles bootstrap recommends for screen-reader-only display, so it should still be visible to screen-readers. Couldn't actually use SASS `@extend .sr-only;`, because the media query involved seem to prevent it from working as desired, so had to copy and paste the styles. Pretty sure there's no better way to do it (if bootstrap-sass had provided it as a mixin instead of an ordinary class, there might be!)

For a breakpoint, I used bootstrap's `$screen-xs-min`, which defaults to 480px, and seemed about right. The next breakpoint up is `$screen-md-min`, which defaults to 768px, which seemed to me too wide to drop the label.

There are some other potential issues you can see the search bar at very small sizes (double top/bottom border? what the heck to do with the select menu?), but I'm not entirely sure what causes them or how to fix them or what the right fixes are, and I think this is an improvement on it's own, doesn't make things any worse, and is likely to be desired even with other fixes. So suggest starting with this.