Looks like this is because it doesn't have the + 1 that most other breakpoints have, which is maybe why we have so many (min-width: $width-desktop + 1 + px)s in the codebase.
We should use the breakpoint variable directly in the codebase if possible, and replace existing (min-width: $width-desktop + 1 + px) with the breakpoint directly.
Do not alter or remove anything below. The following sections will be managed by moderators only.
We need to update our breakpoint variables to be more intuitive (or maybe use mixins) as it's too easy to have media queries that are off by 1 due to inclusion or not in the condition.
Feature Description
In #8961 I noticed that we have a SASS breakpoint for desktop here: https://github.com/google/site-kit-wp/blob/08388e7d7121e8a32f4abe7cac28f12da7611542/assets/sass/config/_variables.scss#L272-L278, but it's often unused in favour of
(min-width: $width-desktop + 1 + px)
:Looks like this is because it doesn't have the
+ 1
that most other breakpoints have, which is maybe why we have so many(min-width: $width-desktop + 1 + px)
s in the codebase.We should use the breakpoint variable directly in the codebase if possible, and replace existing
(min-width: $width-desktop + 1 + px)
with the breakpoint directly.Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
Test Coverage
QA Brief
Changelog entry