gpui: Add container_query element#60774
Merged
Merged
Conversation
An element whose contents are built after its own size is resolved, using the same prepaint two-pass technique as uniform_list (no deferred draws). Also reworks the grid_layout example to demonstrate it by collapsing the Holy Grail layout to a stacked column when narrow.
Anthony-Eid
approved these changes
Jul 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a
container_queryelement to GPUI, in the spirit of CSS container queries: the element's own size is determined solely by its style and the space offered by its parent, and once that size is known the provided closure is called with the measured size to build the contents.Implementation notes:
size_full()semantics), overridable viaStyledsince contents can't influence the container's size (the same constraint CSS container queries impose).grid_layoutexample (the Holy Grail layout) to demonstrate it: the three-column grid collapses to a stacked column when the window is narrower than 400px, and the header shows the live measured width.Release Notes: