Timeline: preserve intrinsic width in shrink-to-fit containers

[liuliu-dev]

Fixes a regression introduced in #8169.

Removing inline-size containment allows content-sized Timelines to contribute to their containing block's intrinsic width instead of collapsing to 0px.

The responsive Actions layout is preserved by observing the Timeline's rendered width and applying the narrow grid layout below 480px.

Changelog

New

• Added regression coverage for Timelines rendered inside shrink-to-fit containers.
• Added visual regression coverage for Timeline Actions.

Changed

• Preserve Timeline's intrinsic width while continuing to wrap Actions below Body when narrower than 480px.

Removed

• None.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

• Verified a content-sized Timeline and its Body retain nonzero widths inside a centered shrink-to-fit flex child.
• Verified Actions wrap below Body at 479px and remain inline at 480px.
• Verified forwarded refs continue to resolve to both the default div and feature-flagged ol roots.
• Verified the default, condensed, clipped-sidebar, break, avatar, and actions layouts in Storybook.
• Added With Actions to the Timeline VRT matrix.
• Ran the Timeline unit suite: 31 tests passed.
• Ran focused Playwright regression tests: 2 tests passed.
• Ran Prettier, ESLint, and Stylelint on the changed files.

[changeset-bot]

🦋 Changeset detected

Latest commit: 26383db

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

[Copilot]

Copilot review overview

🟡 Changes recommended

It introduces avoidable re-renders in Timeline’s resize observer handler and contains potentially flaky strict y-position assertions in the new Playwright test.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Review tier: Lite
Findings: 2

New issues introduced by this change (2)

Severity	Finding
	e2e/​components/​Timeline.test.ts — This assertion uses a strict y comparison; depending on subpixel rounding, the Actions container…
	packages/​react/​src/​Timeline/​Timeline.tsx — useResizeObserver will call setIsNarrow on every resize (and potentially on mount), even when the…

What changed in this PR

This PR fixes a regression where Timeline could collapse to 0px width in shrink-to-fit containers by removing inline-size containment, while preserving the <480px “Actions wrap below Body” responsive behavior via a measured-width (ResizeObserver) toggle.

Changes:

• Replaced the CSS container-query approach with a data-timeline-narrow attribute driven by useResizeObserver in Timeline.
• Updated Timeline CSS (and related feature-story CSS) to key narrow-layout rules off data-timeline-narrow instead of @container.
• Added unit ref-forwarding coverage and new Playwright coverage for intrinsic-width retention and the 479px/480px Actions wrap boundary.

File	Description
packages/​react/​src/​Timeline/​Timeline.tsx	Adds ResizeObserver-driven data-timeline-narrow attribute and merges forwarded + internal refs.
packages/​react/​src/​Timeline/​Timeline.module.css	Removes container-type and switches narrow Actions layout rules to attribute-based selectors.
packages/​react/​src/​Timeline/​Timeline.features.stories.module.css	Updates feature-story narrow styling to use data-timeline-narrow instead of container queries.
packages/​react/​src/​Timeline/​__tests__/​Timeline.test.tsx	Adds unit tests to verify ref forwarding for both div and ol roots.
e2e/​components/​Timeline.test.ts	Adds Playwright regression tests for intrinsic width in shrink-to-fit and 479/480 Actions wrapping.
.changeset/​timeline-intrinsic-width.md	Adds patch changeset describing the regression fix and preserved responsive behavior.

Suppressed comments (1)

e2e/components/Timeline.test.ts:84

• This assertion uses a strict y comparison; when Actions are inline with Body, their y positions can be equal (same row) due to layout/rounding. Use a non-strict comparison to reduce flakiness while still verifying Actions aren’t wrapped below Body at >=480px.

      element.style.width = '480px'
    })
    await expect(timeline).not.toHaveAttribute('data-timeline-narrow')
    await expect.poll(async () => (await actions.boundingBox())?.y).toBeLessThan((await body.boundingBox())?.y ?? 0)
  })

---

💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.

[primer-integration]

Integration test results from github/github-ui PR:

  CI Passed
  VRT Passed
  Projects Passed

All checks passed!

[joshblack]

@liuliu-dev is there any way to avoid using a resize observer for this? Just to avoid the layout shift during hydration (hope that makes sense, let me know if not!)

[liuliu-dev]

@liuliu-dev is there any way to avoid using a resize observer for this? Just to avoid the layout shift during hydration (hope that makes sense, let me know if not!)

That makes sense. A viewport media query would avoid the hydration shift, but wouldn’t work correctly in split views. I couldn’t find a css only option that preserves both behaviors.