search

google / site-kit-wp

Site Kit is a one-stop solution for WordPress users to use everything Google has to offer to make them successful on the web.
https://sitekit.withgoogle.com
Apache License 2.0
1.22k stars 278 forks source link

Desktop breakpoint should match other `+ 1` breakpoints #8964

Open tofumatt opened 2 months ago

tofumatt commented 2 months ago

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):

Screenshot 2024-07-04 at 13 05 37

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

aaemnnosttv commented 1 month ago

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.