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 @@ ...@@ -2,7 +2,7 @@
padding-left: 0; padding-left: 0;
padding-right: 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; overflow-x: scroll;
} }
} }
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
} }
} }
@media (max-width: $screen-md-min) { @media (max-width: $screen-sm-max) {
ul.notes { ul.notes {
.flash-container.timeline-content { .flash-container.timeline-content {
margin-left: 0; margin-left: 0;
......
...@@ -98,7 +98,7 @@ label { ...@@ -98,7 +98,7 @@ label {
} }
} }
@media(max-width: $screen-sm-min) { @media(max-width: $screen-xs-max) {
padding: 0 $gl-padding; padding: 0 $gl-padding;
.control-label, .control-label,
......
...@@ -228,7 +228,7 @@ header { ...@@ -228,7 +228,7 @@ header {
} }
.page-sidebar-pinned.right-sidebar-expanded { .page-sidebar-pinned.right-sidebar-expanded {
@media (max-width: $screen-lg-min) { @media (max-width: $screen-md-max) {
.header-content .title { .header-content .title {
width: 300px; width: 300px;
} }
......
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
/** /**
* Small screen pagination * Small screen pagination
*/ */
@media (max-width: $screen-xs) { @media (max-width: $screen-xs-min) {
.gl-pagination { .gl-pagination {
.pagination li a { .pagination li a {
padding: 6px 10px; padding: 6px 10px;
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
/** /**
* Medium screen pagination * 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 { .gl-pagination {
.page { .page {
display: none; display: none;
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
border-bottom: none; border-bottom: none;
position: relative; position: relative;
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
padding: 6px 0 24px; padding: 6px 0 24px;
} }
} }
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
.column { .column {
text-align: center; text-align: center;
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
padding: 15px 0; padding: 15px 0;
} }
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
} }
&:last-child { &:last-child {
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
text-align: center; text-align: center;
} }
} }
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
} }
.inner-content { .inner-content {
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
padding: 0 28px; padding: 0 28px;
text-align: center; text-align: center;
} }
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
font-size: 34px; font-size: 34px;
} }
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
.environments-container { .environments-container {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
......
...@@ -49,14 +49,14 @@ ...@@ -49,14 +49,14 @@
padding: 50px 100px; padding: 50px 100px;
overflow: hidden; overflow: hidden;
@media (max-width: $screen-md-min) { @media (max-width: $screen-sm-max) {
padding: 50px 0; padding: 50px 0;
} }
svg { svg {
float: right; float: right;
@media (max-width: $screen-md-min) { @media (max-width: $screen-sm-max) {
float: none; float: none;
display: block; display: block;
width: 250px; width: 250px;
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
width: 460px; width: 460px;
margin-top: 120px; margin-top: 120px;
@media (max-width: $screen-md-min) { @media (max-width: $screen-sm-max) {
float: none; float: none;
margin-top: 60px; margin-top: 60px;
width: auto; width: auto;
......
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
padding: 20px 0; padding: 20px 0;
} }
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
.milestone-actions { .milestone-actions {
@include clearfix(); @include clearfix();
padding-top: $gl-vert-padding; padding-top: $gl-vert-padding;
......
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
text-align: center; text-align: center;
font-size: 13px; 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, // On smaller devices the warning becomes the fourth item in the list,
// rather than centering, and grows to span the full width of the // rather than centering, and grows to span the full width of the
// comment area. // comment area.
......
...@@ -253,7 +253,7 @@ ul.notes { ...@@ -253,7 +253,7 @@ ul.notes {
} }
.page-sidebar-pinned.right-sidebar-expanded { .page-sidebar-pinned.right-sidebar-expanded {
@media (max-width: $screen-lg-min) { @media (max-width: $screen-md-max) {
.note-header { .note-header {
.note-headline-light { .note-headline-light {
display: block; display: block;
......
...@@ -180,7 +180,7 @@ ...@@ -180,7 +180,7 @@
.modal-dialog { .modal-dialog {
width: 380px; width: 380px;
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
width: auto; width: auto;
} }
...@@ -261,4 +261,4 @@ table.u2f-registrations { ...@@ -261,4 +261,4 @@ table.u2f-registrations {
td:not(:last-child) { td:not(:last-child) {
border-right: solid 1px transparent; border-right: solid 1px transparent;
} }
} }
\ No newline at end of file
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
} }
.download-button { .download-button {
@media (max-width: $screen-lg-min) { @media (max-width: $screen-md-max) {
margin-left: 0; margin-left: 0;
} }
} }
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
@include make-md-column(6); @include make-md-column(6);
margin-top: 10px; margin-top: 10px;
@media (max-width: $screen-sm-min) { @media (max-width: $screen-xs-max) {
width: 100%; width: 100%;
} }
} }
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
.last-commit { .last-commit {
@include str-truncated(506px); @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); @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