fix(codeblock): codeblock flickering issue #5849

villAsh · 2025-10-25T07:47:05Z

📝 Description

When scrolling inside the Code tab of the any component section on the documentation page, the content flickers or flashes repeatedly.

⛳️ Current behavior (updates)

It does not allows users to scroll smoothly.

🚀 New behavior

The code block now scroll smoothly with no flickering or repaint artifacts.

💣 Is this a breaking change (Yes/No):

No

codeblock-flickering-issue-solved.mov

📝 Additional Information

Summary by CodeRabbit

Bug Fixes
- Minor adjustment to code block rendering to more consistently preserve layout and horizontal scrolling for long lines by removing an unnecessary container class.
Style
- Tweaked code block container classes to refine overflow handling and whitespace preservation for improved readability without changing syntax highlighting.

changeset-bot · 2025-10-25T07:47:09Z

⚠️ No Changeset found

Latest commit: 2fef30c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

vercel · 2025-10-25T07:47:09Z

@villAsh is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2025-10-25T07:47:17Z

Walkthrough

Removed the contents class from the pre element in the CodeBlockHighlight component and adjusted the className construction/formatting; no exported APIs or runtime control flow changes.

Changes

Cohort / File(s)	Change Summary
Codeblock component styling `apps/docs/components/docs/components/codeblock.tsx`	Removed the `contents` class from the `pre` element's class list (leaving `max-w-full` and existing conditional `flex-col` / `overflow-x-scroll scrollbar-hide` logic); minor formatting adjustments to the `className` construction. No exported-signature changes.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Single-file, presentation/formatting edits.
Review focus:
- Confirm removal of contents doesn't affect layout in edge cases.

Suggested reviewers

jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "fix(codeblock): codeblock flickering issue" is directly related to the main change in the changeset. The raw summary indicates that the modification removes the "contents" CSS class from the code block's pre element, which addresses visual rendering issues. The PR description confirms this is fixing a scrolling flickering problem in code blocks on the documentation pages. The title is specific, concise, and clearly communicates the primary intent of the change without being vague or generic.
Description Check	✅ Passed	The PR description follows the provided template structure and includes all required sections: it references the closed issue, provides a clear problem description (scrolling causes flickering), explains the current behavior (non-smooth scrolling), describes the new behavior (smooth scrolling without artifacts), explicitly states it is not a breaking change, and includes additional supporting evidence (video demo). All sections are populated with meaningful content that explains the fix and its impact.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 45b13a5 and 2fef30c.

📒 Files selected for processing (1)

apps/docs/components/docs/components/codeblock.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

apps/docs/components/docs/components/codeblock.tsx

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/docs/components/docs/components/codeblock.tsx (1)
103-106: Remove commented code and clarify the explanatory comment.

The commented line 106 shows invalid code (width: "w-full" where "w-full" is a Tailwind class, not a CSS value) that should be removed entirely. Additionally, the comment on lines 103-105 describes the old flickering behavior but may confuse readers since it references display: contents which is no longer present in the code.

Consider this cleanup:
-      style={{
-        height: isVisible ? "auto" : `${height}px`,
-        // due to display: contents on the scrollable child element, this div will also scroll
-        // this causes the intersection observer to trigger if scrolled far enough horizontally
-        // set the width to fit-content to prevent this div from going off screen
-        // width: "w-full",
-      }}
+      style={{
+        height: isVisible ? "auto" : `${height}px`,
+      }}

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 328c57d and a30e644.

📒 Files selected for processing (1)

apps/docs/components/docs/components/codeblock.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/docs/components/docs/components/codeblock.tsx (1)

packages/core/react/src/scripts/postbuild.js (1)

style (56-56)

🔇 Additional comments (2)

apps/docs/components/docs/components/codeblock.tsx (2)

132-137: LGTM: Correct overflow handling for horizontal scrolling.

The addition of overflow-x-auto on the pre element, combined with overflow-hidden on the parent container, properly isolates scrolling behavior and resolves the flickering issue.

139-144: LGTM: Explicit display and whitespace properties ensure correct code rendering.

Setting display: "block" and whiteSpace: "pre" explicitly guarantees proper block-level layout and whitespace preservation for the code block, regardless of inherited or theme-provided styles.

vercel · 2025-10-25T07:50:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 1, 2025 10:28am
heroui-sb	Ready	Preview	Comment	Nov 1, 2025 10:28am

pkg-pr-new · 2025-10-25T07:55:45Z

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5849

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5849

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5849

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5849

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5849

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5849

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5849

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5849

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5849

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5849

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5849

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5849

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5849

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5849

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5849

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5849

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5849

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5849

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5849

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5849

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5849

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5849

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5849

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5849

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5849

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5849

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5849

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5849

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5849

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5849

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5849

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5849

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5849

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5849

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5849

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5849

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5849

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5849

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5849

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5849

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5849

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5849

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5849

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5849

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5849

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5849

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5849

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5849

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5849

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5849

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5849

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5849

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5849

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5849

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5849

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5849

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5849

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5849

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5849

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5849

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5849

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5849

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5849

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5849

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5849

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5849

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5849

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5849

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5849

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5849

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5849

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5849

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5849

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5849

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5849

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5849

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5849

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5849

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5849

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5849

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5849

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5849

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5849

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5849

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5849

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5849

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5849

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5849

commit: 2fef30c

wingkwong

I think most of the changes are not really required. Not sure if I've missed something. Could you please explain them line by line?

villAsh · 2025-10-29T15:39:18Z

@wingkwong, I get it,

I'll revert a few changes and see if it works or not.

villAsh · 2025-10-29T15:44:40Z

@wingkwong updated, please check.

apps/docs/components/docs/components/codeblock.tsx

…yles

fix: updated codeblock component to prevent flicker when scrolling

a30e644

villAsh requested a review from jrgarciadev as a code owner October 25, 2025 07:47

villAsh mentioned this pull request Oct 25, 2025

[BUG] - Flickering when scrolling overflow on documentation page #5844

Closed

coderabbitai bot reviewed Oct 25, 2025

View reviewed changes

vercel bot deployed to Preview – heroui October 25, 2025 07:52 View deployment

vercel bot deployed to Preview – heroui-sb October 25, 2025 07:54 View deployment

wingkwong requested changes Oct 27, 2025

View reviewed changes

wingkwong assigned villAsh Oct 28, 2025

fix(codeblock): revert className and style handling

311d6f4

villAsh requested a review from wingkwong October 29, 2025 15:45

vercel bot deployed to Preview – heroui-sb October 29, 2025 16:23 View deployment

vercel bot deployed to Preview – heroui October 29, 2025 16:23 View deployment

wingkwong requested changes Oct 29, 2025

View reviewed changes

apps/docs/components/docs/components/codeblock.tsx Outdated Show resolved Hide resolved

apps/docs/components/docs/components/codeblock.tsx Show resolved Hide resolved

fix(codeblock): clean up className handling and remove unnecessary st…

45b13a5

…yles

villAsh requested a review from wingkwong November 1, 2025 07:21

chore(docs): format

2fef30c

wingkwong unassigned villAsh Nov 1, 2025

vercel bot deployed to Preview – heroui November 1, 2025 10:27 View deployment

vercel bot deployed to Preview – heroui-sb November 1, 2025 10:27 View deployment

wingkwong approved these changes Nov 1, 2025

View reviewed changes

wingkwong added this to the v2.8.6 milestone Nov 1, 2025

wingkwong merged commit 27fec2d into heroui-inc:canary Nov 1, 2025
10 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(codeblock): codeblock flickering issue #5849

fix(codeblock): codeblock flickering issue #5849

Uh oh!

villAsh commented Oct 25, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Oct 25, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 25, 2025

Uh oh!

coderabbitai bot commented Oct 25, 2025 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

vercel bot commented Oct 25, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 25, 2025 •

edited

Loading

Uh oh!

wingkwong left a comment

Uh oh!

villAsh commented Oct 29, 2025

Uh oh!

villAsh commented Oct 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

fix(codeblock): codeblock flickering issue #5849

fix(codeblock): codeblock flickering issue #5849

Uh oh!

Conversation

villAsh commented Oct 25, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Oct 25, 2025

Uh oh!

coderabbitai bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wingkwong left a comment

Choose a reason for hiding this comment

Uh oh!

villAsh commented Oct 29, 2025

Uh oh!

villAsh commented Oct 29, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

villAsh commented Oct 25, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Oct 25, 2025 •

edited

Loading

coderabbitai bot commented Oct 25, 2025 •

edited

Loading

vercel bot commented Oct 25, 2025 •

edited

Loading

pkg-pr-new bot commented Oct 25, 2025 •

edited

Loading