Merge branch '25198-improper-use-of-bootstrap-media-query-variables' into 'master'

Resolve "Improper use of bootstrap media query variables"

## What does this MR do?

Corrects media queries which are off by `1px` due to incorrect `$screen-{xs,sm,md,lg}-min` usage.

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

Ensure none of these errors were somehow intentional (I can't imagine a legitimate use case for `@media (max-width: $screen-sm-min)` though)

## Why was this MR needed?

When "min" breakpoints are used for "max-width" media queries, they create an overlap in rule breakpoints.  For instance in the following scenario:

```scss
.foo {
  @media (min-width: $screen-sm-min) {
    width: 100px;
    padding: 0;
  }
  @media (max-width: $screen-sm-min) {
    padding: 10px 0;
  }
}
```

If the viewport were set to exactly `$screen-sm-min` pixels, both of these media queries would apply.  It is important to use `max-width: $screen-xs-max` in this case which is equal to `$screen-sm-min - 1`.

## Does this MR meet the acceptance criteria?

- [ ] ~~[Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) 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 [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [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 it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #25198

See merge request !7863

app/assets/stylesheets/framework/calendar.scss

@@ -2,7 +2,7 @@
   padding-left: 0;
   padding-right: 0;
 
-  @media (min-width: $screen-sm-min) and (max-width: $screen-lg-min) {
+  @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
     overflow-x: scroll;
   }
 }

app/assets/stylesheets/framework/flash.scss

@@ -38,7 +38,7 @@
   }
 }
 
-@media (max-width: $screen-md-min) {
+@media (max-width: $screen-sm-max) {
   ul.notes {
     .flash-container.timeline-content {
       margin-left: 0;

app/assets/stylesheets/framework/forms.scss

@@ -98,7 +98,7 @@ label {
     }
   }
 
-  @media(max-width: $screen-sm-min) {
+  @media(max-width: $screen-xs-max) {
     padding: 0 $gl-padding;
 
     .control-label,

app/assets/stylesheets/framework/header.scss

@@ -228,7 +228,7 @@ header {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .header-content .title {
       width: 300px;
     }

app/assets/stylesheets/framework/pagination.scss

@@ -43,7 +43,7 @@
 /**
  * Small screen pagination
  */
-@media (max-width: $screen-xs) {
+@media (max-width: $screen-xs-min) {
   .gl-pagination {
     .pagination li a {
       padding: 6px 10px;
@@ -62,7 +62,7 @@
 /**
  * Medium screen pagination
  */
-@media (min-width: $screen-xs) and (max-width: $screen-md-max) {
+@media (min-width: $screen-xs-min) and (max-width: $screen-md-max) {
   .gl-pagination {
     .page {
       display: none;

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -53,7 +53,7 @@
       border-bottom: none;
       position: relative;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 6px 0 24px;
       }
     }
@@ -61,7 +61,7 @@
     .column {
       text-align: center;
 
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 15px 0;
       }
 
@@ -78,7 +78,7 @@
       }
 
       &:last-child {
-        @media (max-width: $screen-sm-min) {
+        @media (max-width: $screen-xs-max) {
           text-align: center;
         }
       }
@@ -156,7 +156,7 @@
     }
 
     .inner-content {
-      @media (max-width: $screen-sm-min) {
+      @media (max-width: $screen-xs-max) {
         padding: 0 28px;
         text-align: center;
       }

app/assets/stylesheets/pages/environments.scss

@@ -8,7 +8,7 @@
   font-size: 34px;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .environments-container {
     width: 100%;
     overflow: auto;

app/assets/stylesheets/pages/groups.scss

@@ -49,14 +49,14 @@
   padding: 50px 100px;
   overflow: hidden;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     padding: 50px 0;
   }
 
   svg {
     float: right;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       display: block;
       width: 250px;
@@ -71,7 +71,7 @@
     width: 460px;
     margin-top: 120px;
 
-    @media (max-width: $screen-md-min) {
+    @media (max-width: $screen-sm-max) {
       float: none;
       margin-top: 60px;
       width: auto;

app/assets/stylesheets/pages/milestone.scss

@@ -123,7 +123,7 @@
   padding: 20px 0;
 }
 
-@media (max-width: $screen-sm-min) {
+@media (max-width: $screen-xs-max) {
   .milestone-actions {
     @include clearfix();
     padding-top: $gl-vert-padding;

app/assets/stylesheets/pages/note_form.scss

@@ -111,7 +111,7 @@
   text-align: center;
   font-size: 13px;
 
-  @media (max-width: $screen-md-min) {
+  @media (max-width: $screen-sm-max) {
     // On smaller devices the warning becomes the fourth item in the list,
     // rather than centering, and grows to span the full width of the
     // comment area.

app/assets/stylesheets/pages/notes.scss

@@ -253,7 +253,7 @@ ul.notes {
 }
 
 .page-sidebar-pinned.right-sidebar-expanded {
-  @media (max-width: $screen-lg-min) {
+  @media (max-width: $screen-md-max) {
     .note-header {
       .note-headline-light {
         display: block;

app/assets/stylesheets/pages/profile.scss

@@ -180,7 +180,7 @@
   .modal-dialog {
     width: 380px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: auto;
     }
 

app/assets/stylesheets/pages/projects.scss

@@ -189,7 +189,7 @@
   }
 
   .download-button {
-    @media (max-width: $screen-lg-min) {
+    @media (max-width: $screen-md-max) {
       margin-left: 0;
     }
   }

app/assets/stylesheets/pages/stat_graph.scss

@@ -37,7 +37,7 @@
     @include make-md-column(6);
     margin-top: 10px;
 
-    @media (max-width: $screen-sm-min) {
+    @media (max-width: $screen-xs-max) {
       width: 100%;
     }
   }

app/assets/stylesheets/pages/tree.scss

@@ -31,7 +31,7 @@
       .last-commit {
         @include str-truncated(506px);
 
-        @media (min-width: $screen-sm-max) and (max-width: $screen-md-max) {
+        @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
           @include str-truncated(450px);
         }