feat(index): add empty line to even code box size

[ATiwari03-03-2004]

Description

This PR fixes the variable height issue of code block by introducing fixed height for the code block

Validation

Screen.Recording.2025-12-25.161204.mp4

Related Issues

Fixes #8425

Check List

• I have read the Contributing Guidelines and made commit messages that follow the guideline.
• I have run pnpm format to ensure the code follows the style guide.
• I have run pnpm test to check if all tests are passing.
• I have run pnpm build to check if the website builds without errors.
• I've covered new added functionality with unit tests if necessary.

[vercel]

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

Project	Deployment	Review	Updated (UTC)
nodejs-org	Ready	Preview	Dec 25, 2025 7:17pm

[github-actions]

👋 Codeowner Review Request

The following codeowners have been identified for the changed files:

Team reviewers: @nodejs/nodejs-website

Please review the changes when you have a chance. Thank you! 🙏

[Copilot]

Pull request overview

This PR addresses a variable height issue in code blocks by applying a fixed height of 19rem to code blocks within active tabs. The fix targets the BaseCodeBox component when rendered inside tabs with an active state.

• Introduces a fixed height constraint for code blocks in active tabs
• Uses CSS selector targeting div[data-state='active'] to scope the height change

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The CSS selector is overly broad and may cause unintended side effects. It targets any div with data-state='active' followed by any descendant with class 'root' and a pre element. This could affect other components in the codebase that use similar patterns. Consider using a more specific selector by adding a unique class to the CodeTabs or Tabs component wrapper, or scope this selector to be more specific to the BaseCodeBox component within a tabs context.

[Copilot]

The fixed height of 19rem (304px) is a magic number without documentation or explanation. Consider extracting this value to a CSS custom property (CSS variable) with a descriptive name, or adding a comment explaining why this specific height was chosen. Additionally, this fixed height may cause issues on different screen sizes or with varying amounts of code content. Consider whether overflow-y: auto should be added to handle cases where content exceeds the fixed height, or whether a max-height with min-content behavior would be more appropriate.

[Copilot]

Setting a fixed height on the pre element without overflow-y handling will cause content that exceeds 19rem to be cut off and inaccessible to users. The existing overflow-x-auto is on the nested code element (line 19), not the pre element. Consider adding overflow-y-auto to this rule to ensure users can scroll through longer code blocks, or verify that all code content in active tabs will always fit within 19rem.

Suggested change

	div[data-state='active'] .root pre {
	div[data-state='active'] .root pre {
	@apply overflow-y-auto;

[avivkeller]

Don't we just need to make all the code boxes the same height, without CSS changes?

[ATiwari03-03-2004]

@avivkeller I used CSS because the height difference was coming from content length across tabs, and there wasn’t an existing prop or layout constraint to normalize it. When you say “without CSS changes,” do you mean setting a fixed height at the component level or something else?

[avivkeller]

I mean just adding a line to the code block, surely there's a way we can get it to the 14? lines it needs to be

[ATiwari03-03-2004]

Oh ok, then i will add an extra line to code block of Streams pipeline section, that ought to do it

[avivkeller]

Perhaps put the line before the comment?

[ATiwari03-03-2004]

I have shifted it just above comment

[github-actions]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 96	🟠 88	🟢 100	🟢 100	🔗
/en/about	🟢 99	🟢 93	🟢 100	🟠 88	🔗
/en/about/previous-releases	🟢 98	🟢 93	🟢 100	🟢 100	🔗
/en/download	🟢 97	🟢 96	🟢 100	🟢 100	🔗
/en/download/archive/current	🟢 99	🟢 100	🟢 100	🟢 100	🔗
/en/blog	🟢 99	🟢 100	🟢 96	🟢 100	🔗

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.83%. Comparing base (8ab0fd7) to head (009617c).
⚠️ Report is 2 commits behind head on main.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8450      +/-   ##
==========================================
+ Coverage   73.81%   73.83%   +0.01%     
==========================================
  Files         109      109              
  Lines        9255     9255              
  Branches      313      313              
==========================================
+ Hits         6832     6833       +1     
+ Misses       2421     2420       -1     
  Partials        2        2              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ovflowd]

This fix is so funny. Anyhow, SGTM