=== Background
Vector employs both `min-width` and `max-width` media queries, both of which are inclusive of the pixel value. Due to this, the styles are prone to breaking on the exact pixel values of our breakpoints (i.e. https://wikimedia.slack.com/archives/G8QAPHCTT/p1654903525144409).
=== AC
[] No visual changes on non-breakpoint viewports
[] Layout and styling are consistent on breakpoint viewports
=== Developer notes
This can be solved by refactoring our CSS to consistently use a single type of media query, or updating our breakpoints to account for that 1px. The easiest solution would be to add new media query variables that take the 1px into account, so that the existing CSS can be fixed with search and replace.
```
@width-breakpoint-desktop-increment: @width-breakpoint-desktop - 1;
// Active when viewport is 1000px and over
@mediaquery-min-width-desktop: ~'min-width: @{width-breakpoint-desktop}';
// Active when viewport is 999px and under
@mediaquery-max-width-desktop: ~'max-width: @{width-breakpoint-desktop-increment}';
```
Then `@media ( max-width: @width-breakpoint-desktop ) { }` becomes `@media ( @mediaquery-max-width-desktop ) { }`
That said, I think it's a good idea to refactor media queries to use `min-width` when possible, as that's generally best suited for CSS that targets mobile by default and uses media queries to handle larger viewports. To avoid regressions and to limit the number of needed changes, clean up should ideally be done after the CSS grid is implemented and after our layout styles are simplified (T310010).
QA Steps
============
Vector uses breakpoints from [[ https://github.com/wikimedia/mediawiki/blob/f74638dd59bb2c6e737978264f64cf2bcda562b1/resources/src/mediawiki.less/mediawiki.skin.defaults.less#L29-L42 | core ]] so the following viewport widths should be tested:
1) 320px
2) 720px
3) 1000px
4) 1200px
1) Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog
2) For each viewport width listed above, resize your browser's viewport to that **exact width**. Compare what you see at this viewport width with what you see when the viewport width has increased by 1 pixel and decreased by 1 pixel. You shouldn't see anything peculiar that only happens at the in-between viewport width. For example, before work was done on this ticket, the table of contents was losing its background color at exactly 1000px but this was **only** happening at exactly 1000px and **wasn't** happening at 999px or 1001px.
{F35268635}