quarto-dev / quarto-dev/quarto-cli
Consider use of @container queries to resize grid listings rather than @media
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 6k
- Forks
- 458
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 41
Description
The grid listing type seems to be based on @media queries to decrease the number of columns as the width decreases. This works well when the listing occupy the full width of the page but not for multicolumn views. Would it be possible to use a @container query instead?
Fwiw adding container-type: inline-size to the top level container of the listing and then copying all the @media css into corresponding @container queries worked like a charm
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No files or tests are named. Locate the grid listing styles and identify the existing @media rules that control column counts; compare them with the reported container-type: inline-size approach. Done means listings resize correctly in both full-width and multicolumn views without breaking existing layouts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100