report: use container queries for responsive design in DevTools #16342
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
dvangonen
changed the title
dvangonen
changed the title
| @@ -225,6 +225,32 @@ | |||
| } | |||
| } | |||
|
|
|||
| @container lh-container (max-width: 480px) { | |||
There was a problem hiding this comment.
Couldn't we just replace the @media queries with @container queries?
There was a problem hiding this comment.
I left media queries as a fallback for older browsers.. @container is available since 2023 across major browsers.
There was a problem hiding this comment.
I think we should keep them both for better compatibility
There was a problem hiding this comment.
Gotcha. In that case can you add some TODO comments above the media queries about removing them and link to the bug #16332.
We can circle back to this once @container queries hit widely available in baseline.
| @@ -1701,6 +1789,13 @@ | |||
| } | |||
| } | |||
There was a problem hiding this comment.
Comment for the media query above here?
There was a problem hiding this comment.
So, it's looking pretty nice now. Can we merge this pr?
|
I rebuild here with |
dvangonen
force-pushed
the
container-queries
branch
from
acd74d4 to
32c2ee4
Compare
viewer/app/styles/viewer.css
Outdated
| @@ -141,6 +165,15 @@ body { | |||
| } | |||
| } | |||
|
|
|||
| @container lh-container (min-width: 636px) { | |||
There was a problem hiding this comment.
These are a separate set of styles that will not be inside the lh-container container div and won't be used in DevTools.
I think we should revert the changes in this file.
There was a problem hiding this comment.
Yeah, that's right
adamraine
changed the title
Summary
This is a fix of broken lighthouse layout in Chrome DevTools.
You can't actually see this problem in standalone version of Lighthouse. Because there are
@media queries, which apply proper stylings to all elements based on Viewport.But you can't rely on Viewport if you've integrated into Chrome DevTools.
So this PR leverages a new feature available - css container queries, which helps apply the same styles as
@media queries, but to the container itself.Related Issues/PRs
Issue