Skip to content

style: cap height of artificially-slow example output (#8486)#8495

Open
lee-eojin wants to merge 1 commit into
reactjs:mainfrom
lee-eojin:fix/8486-cap-slow-example-height
Open

style: cap height of artificially-slow example output (#8486)#8495
lee-eojin wants to merge 1 commit into
reactjs:mainfrom
lee-eojin:fix/8486-cap-slow-example-height

Conversation

@lee-eojin

Copy link
Copy Markdown

Fixes #8486

Summary

Expanded Sandpack previews can become excessively tall when an example renders hundreds of list items.

This change caps the affected lists while preserving the original 250/500 item counts and their rendering behavior.

 .items {
+  max-height: 1200px;
+  overflow-y: auto;
 }

This covers:

  • Two useDeferredValue examples rendering 250 items
  • Four useTransition examples rendering 500 posts

All items are still rendered and remain accessible by scrolling inside the list.

Scope

This change intentionally scopes the height limit to the affected list examples. Applying a global limit to expanded Sandpack previews would affect unrelated examples and may change the intended “Show more” behavior.

Follow-up question

Would you be open to capping the height of expanded Sandpack previews globally?

Currently, “Show more” removes the maximum height entirely. I kept this PR scoped to the affected examples to avoid changing unrelated Sandpacks.

If a global limit is preferred, I can address that separately in a follow-up.

AFTER

스크린샷 2026-06-23 오후 9 04 33 스크린샷 2026-06-23 오후 9 03 40

Test plan

  • Confirmed that all six affected lists have the height limit
  • Confirmed that the original 250/500 item counts remain unchanged
  • Ran git diff --check
  • Visually verified normal and expanded Sandpack modes
  • Ran yarn check-all

@github-actions

Copy link
Copy Markdown

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

@lee-eojin lee-eojin changed the title docs: cap height of artificially-slow example output (#8486) style: cap height of artificially-slow example output (#8486) Jun 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Suggestion]: Cap the height of the artificially-slow example output (useDeferredValue / useTransition)

1 participant