Merge branch 'lbennett/gitlab-ce-18490-top-area-css-tablet-view' into 'master'

Corrected top search area css media query param

## What does this MR do?

Corrects top search area css media query so it switches styles at the correct screen size.

## Are there points in the code the reviewer needs to double check?

It's a regression so likely

## Why was this MR needed?

UX

## What are the relevant issue numbers?

Closes #18490. (This stops the search bar dropping into its own row until it needs to be 100% column stacked anyway)

## Screenshots (if relevant)

![Screen_Shot_2016-06-17_at_17.45.38](/uploads/2278e2cdb1c2de14fc098e30fd5328d8/Screen_Shot_2016-06-17_at_17.45.38.png)

## Does this MR meet the acceptance criteria?

- [ ] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- [ ] Tests
  - [ ] Added for this feature/bug
  - [ ] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4756

app/assets/stylesheets/framework/nav.scss

@@ -136,7 +136,7 @@
     }
 
     /* Small devices (phones, tablets, 768px and lower) */
-    @media (max-width: $screen-sm-max) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }
@@ -220,6 +220,7 @@
       form {
         display: block;
         height: auto;
+        margin-bottom: 14px;
 
         input {
           width: 100%;