ref(scraps): Add dedicated container query breakpoint tokens by priscilawebdev · Pull Request #119804 · getsentry/sentry

priscilawebdev · 2026-07-16T08:04:23Z

We need more granular breakpoints to make sure components fit perfectly inside their containers, so we are introducing a new scale specifically for container queries.

We decided to stick with T-shirt sizes (xs, sm, md, etc.). They might not be very semantic, but they are scalable, familiar, and widely used across the industry.

This PR introduces the new container-specific scales, updates the relevant files to use them, updates the Scraps markdown story.

github-actions · 2026-07-16T08:06:32Z

Story previews

Preview the stories changed in this PR on the Vercel deployment:

_{Preview deployment: https://sentry-8w0ventt3.sentry.dev}

@container

Container queries and viewport media queries shared one scale (theme.breakpoints). Add a dedicated theme.containers scale with t-shirt-size names (zero, 3xs..5xl) for container queries, kept fully separate from the viewport breakpoints scale, following the Tailwind breakpoint/container split. Bare responsive keys resolve against theme.containers (@container); screen:-prefixed keys continue to resolve against theme.breakpoints (@media). Migrate existing bare-key consumers to preserve behavior.

@container

Complete the 2xs->zero container-scale rename in Text's display resolver and its spec, fix stale @container assertions that pointed at theme.breakpoints instead of theme.containers, tighten rc()'s emit() typing so order/sizes key mismatches fail typecheck, and correct stale docs.

Split the Container Queries section into Container tokens and Screen tokens subsections with their own scale tables, lead with the preferred container axis, add a note on the preference, and trim dense prose.

priscilawebdev · 2026-07-16T09:49:15Z

bugbot run

Resolve the bottom-vs-side sidebar flip against the layout's query container via useContainerBreakpoint instead of the viewport-based useMedia lg query, so sidebar placement stays in lockstep with groupDetailsLayout's 4xl container flip. Previously the two could disagree between the container-4xl (1152px) and viewport-lg (1200px) widths, leaving grid borders and the sidebar toggle out of sync with placement.

cursor · 2026-07-16T10:05:33Z

+  // stays in lockstep with groupDetailsLayout's container-query flips — otherwise
+  // the sidebar placement and the grid/border layout can disagree at boundaries.
+  const containerBreakpoint = useContainerBreakpoint();
+  const isBottomSidebar = !SIDE_SIDEBAR_BREAKPOINTS.has(containerBreakpoint);


Missing query container breaks sidebar

High Severity

useContainerBreakpoint() now drives issue-details sidebar placement, but GroupLayoutBody never sets containerType, so no ContainerQueryProvider wraps the layout. The hook always falls back to zero, isBottomSidebar stays true, and the sidebar keeps rendering even when the user collapses it on wide layouts.

Additional Locations (1)

static/app/views/issueDetails/groupDetailsLayout.tsx#L35-L45

^{Reviewed by Cursor Bugbot for commit b263cbe. Configure here.}

TkDodo · 2026-07-16T10:06:06Z

+// kept separate from the viewport `breakpoints` scale (see tokens/size.tsx).
+// Bare responsive keys (e.g. `{md: …}`) resolve against these; `screen:`-prefixed
+// keys resolve against viewport `breakpoints`.
+export const containers = {


where are the screen: breakpoints defined actually? shouldn’t we define them with screen: in constants instead of prefixing them with screen: at runtime? Note that we only did this before because the token names were the same, which they are not anymore.

good idea! 52cab71

Replace the hand-maintained "at or above 4xl" breakpoint Set with useResponsivePropValue({zero: 'bottom', '4xl': 'side'}), mirroring groupDetailsLayout's own {zero, '4xl'} container-query prop exactly. This declares the flip point once in the same form as the layout instead of enumerating membership, so adding a higher container breakpoint can't silently desync placement again. Export useResponsivePropValue from the layout barrel.

Sidebar placement now resolves against the query container's width via useResponsivePropValue instead of the viewport. The test rendered GroupDetailsLayout with no container ancestor, so jsdom's 0px container resolved to the bottom layout, which keeps the sidebar visible and broke the collapse assertion. Wrap the render in a Container(inline-size) and fake a desktop width so it exercises the collapsible side layout, as production does under organizationLayout.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit ce11468. Configure here.}

cursor · 2026-07-16T11:00:23Z

-      display={{'2xs': 'flex', lg: 'grid'}}
-      flexGrow={{'2xs': 1, lg: 0}}
+      display={{zero: 'flex', '4xl': 'grid'}}
+      flexGrow={{zero: 1, '4xl': 0}}


Missing query container ancestor

High Severity

Issue details now drives layout and sidebar behavior with bare container breakpoint keys and useResponsivePropValue, but GroupLayoutBody never sets containerType, so no query container or ContainerQueryProvider exists in production. JS and CSS stay on the zero base: the sidebar always behaves as bottom placement, collapsed side layout never applies, and the close toggle stays hidden on wide viewports.

Additional Locations (1)

static/app/views/issueDetails/sidebar/sidebar.tsx#L57-L60

^{Reviewed by Cursor Bugbot for commit ce11468. Configure here.}

…time The container and viewport axes no longer share a scale, so synthesizing the viewport prop keys as `screen:${breakpoint}` at runtime in both rc() and useResponsivePropValue() no longer has the 'names are the same anyway' justification it did when both axes iterated one BREAKPOINT_ORDER. Declare the `screen:`-prefixed prop keys directly in VIEWPORT_ORDER (paired with the bare theme.breakpoints token for the px lookup) so the keys are a single defined source of truth read straight from the prop, rather than assembled in two places. No behavior change.

natemoo-re

Just blocking because our tokens are primarily managed in Figma so I want to make sure we're in sync before we merge!

github-actions Bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jul 16, 2026

vercel Bot deployed to Preview July 16, 2026 08:06 View deployment

priscilawebdev force-pushed the prisca/ref-scraps-container-query-tokens branch from fae7d81 to fe47ea9 Compare July 16, 2026 08:18

vercel Bot deployed to Preview July 16, 2026 08:19 View deployment

priscilawebdev force-pushed the prisca/ref-scraps-container-query-tokens branch from fe47ea9 to 94c7ef3 Compare July 16, 2026 08:31

vercel Bot deployed to Preview July 16, 2026 08:33 View deployment

priscilawebdev force-pushed the prisca/ref-scraps-container-query-tokens branch from 94c7ef3 to 9e7d46c Compare July 16, 2026 08:52

vercel Bot deployed to Preview July 16, 2026 08:54 View deployment

priscilawebdev force-pushed the prisca/ref-scraps-container-query-tokens branch from 9e7d46c to 983a202 Compare July 16, 2026 08:55

vercel Bot deployed to Preview July 16, 2026 08:57 View deployment

vercel Bot deployed to Preview July 16, 2026 09:25 View deployment

ref(scraps): Restructure Container Queries docs into token subsections

18babc0

Split the Container Queries section into Container tokens and Screen tokens subsections with their own scale tables, lead with the preferred container axis, add a note on the preference, and trim dense prose.

vercel Bot deployed to Preview July 16, 2026 09:50 View deployment

cursor Bot reviewed Jul 16, 2026

View reviewed changes

Comment thread static/app/views/issueDetails/groupDetailsLayout.tsx

priscilawebdev marked this pull request as ready for review July 16, 2026 09:52

priscilawebdev requested review from a team as code owners July 16, 2026 09:52

priscilawebdev requested a review from TkDodo July 16, 2026 09:52

vercel Bot deployed to Preview July 16, 2026 10:04 View deployment

cursor Bot reviewed Jul 16, 2026

View reviewed changes

TkDodo approved these changes Jul 16, 2026

View reviewed changes

vercel Bot deployed to Preview July 16, 2026 10:12 View deployment

vercel Bot deployed to Preview July 16, 2026 10:59 View deployment

cursor Bot reviewed Jul 16, 2026

View reviewed changes

vercel Bot deployed to Preview July 16, 2026 11:45 View deployment

natemoo-re requested changes Jul 16, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

ref(scraps): Add dedicated container query breakpoint tokens#119804

ref(scraps): Add dedicated container query breakpoint tokens#119804
priscilawebdev wants to merge 7 commits into
masterfrom
prisca/ref-scraps-container-query-tokens

priscilawebdev commented Jul 16, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 16, 2026 •

edited

Loading

Uh oh!

priscilawebdev commented Jul 16, 2026

Uh oh!

Uh oh!

cursor Bot Jul 16, 2026

Uh oh!

TkDodo Jul 16, 2026

Uh oh!

priscilawebdev Jul 16, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jul 16, 2026

Uh oh!

natemoo-re left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

priscilawebdev commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Story previews

Uh oh!

priscilawebdev commented Jul 16, 2026

Uh oh!

Uh oh!

cursor Bot Jul 16, 2026

Choose a reason for hiding this comment

Missing query container breaks sidebar

Uh oh!

TkDodo Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

priscilawebdev Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 16, 2026

Choose a reason for hiding this comment

Missing query container ancestor

Uh oh!

natemoo-re left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

priscilawebdev commented Jul 16, 2026 •

edited

Loading

github-actions Bot commented Jul 16, 2026 •

edited

Loading