Commit 783f8a0e authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

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
parents d3f1ad82 cc1c9f8b
......@@ -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;
}
}
......
......@@ -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;
......
......@@ -98,7 +98,7 @@ label {
}
}
@media(max-width: $screen-sm-min) {
@media(max-width: $screen-xs-max) {
padding: 0 $gl-padding;
.control-label,
......
......@@ -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;
}
......
......@@ -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;
......
......@@ -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;
}
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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.
......
......@@ -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;
......
......@@ -180,7 +180,7 @@
.modal-dialog {
width: 380px;
@media (max-width: $screen-sm-min) {
@media (max-width: $screen-xs-max) {
width: auto;
}
......
......@@ -189,7 +189,7 @@
}
.download-button {
@media (max-width: $screen-lg-min) {
@media (max-width: $screen-md-max) {
margin-left: 0;
}
}
......
......@@ -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%;
}
}
......
......@@ -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);
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment